无需登录 数据私有 本地保存

Jest 快照差异查看器 - 比较两个快照文件

开发工具 测试 Jest 差异 快照 查看器
9
0
0
0

Jest 快照差异查看器

SnapDiff Viewer · 直观对比两个 Jest 快照文件的差异

快照 A（旧版本）
Snapshot A
快照 B（新版本）
Snapshot B

粘贴两个快照内容，点击"比较差异"开始

支持拖放 .snap 文件到文本区域

常见问题与知识点

Jest 快照测试是一种自动化测试技术，用于捕获组件或数据结构的渲染输出，并将其保存为参考文件（快照）。后续测试运行时，Jest 会将当前输出与已保存的快照进行比较。如果两者匹配，测试通过；如果不匹配，测试失败，提示开发者检查变更是否是预期的。快照文件通常存储在 __snapshots__ 目录下，扩展名为 .snap。

快照文件默认存储在与测试文件同级的 __snapshots__ 文件夹中，文件名与测试文件对应（如 Component.test.js.snap）。文件内容由多个 exports[`test description`] 块组成，每个块对应一个 expect(...).toMatchSnapshot() 调用。快照内容使用模板字面量语法包裹，保留了完整的格式和缩进。

当快照测试失败时，Jest 会提示快照已过时。可以通过以下方式更新：
• 运行 jest --updateSnapshot 或 jest -u 更新所有快照
• 在 watch 模式下按 u 键更新当前快照
• 使用 jest --updateSnapshot --testNamePattern="test-name" 更新特定测试的快照
⚠️ 重要：在更新快照前，务必确认变更是否符合预期，避免将有问题的输出写入快照。

✅ 推荐做法：
• 快照文件应提交到版本控制系统（Git）
• 保持快照小而聚焦，避免过大的快照
• 在 PR 中仔细审查快照变更，就像审查代码一样
• 对于动态内容（日期、随机ID等），使用 expect.any() 或自定义序列化器
• 结合传统的断言测试，不要仅依赖快照测试
❌ 避免：快照过大（数百行）、不审查快照变更、对非确定性输出使用快照。

当多个分支修改了同一快照文件时，Git 可能产生合并冲突。解决方法：
1. 接受某一方的快照版本
2. 运行 jest -u 重新生成快照（确保所有测试通过）
3. 提交重新生成的快照文件
💡 使用本工具可以直观对比两个分支的快照差异，帮助判断哪个版本是正确的。

快照测试不适合以下场景：
• 输出包含大量动态或随机数据
• 需要精确验证业务逻辑（应使用传统断言）
• 快照过大导致难以审查（超过 50-100 行）
• TDD（测试驱动开发）场景——快照更适合回归测试
• 频繁变动的 UI 组件——过多的快照更新会降低测试价值。
🔧 相关工具