UD5工具箱
什么是 Jest 快照测试（Snapshot Testing）？
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 merge conflict）？
当多个分支修改了同一快照文件时，Git 可能产生合并冲突。解决方法：接受某一方的快照版本；运行 jest -u 重新生成快照（确保所有测试通过）；提交重新生成的快照文件。使用本工具可以直观对比两个分支的快照差异，帮助判断哪个版本是正确的。建议在解决冲突后，将两个版本分别粘贴到本工具中进行对比审查，确保最终保留的快照内容是正确的。
什么时候不应该使用快照测试？
快照测试不适合以下场景：输出包含大量动态或随机数据、需要精确验证业务逻辑（应使用传统断言）、快照过大导致难以审查（超过 50-100 行）、TDD（测试驱动开发）场景——快照更适合回归测试、频繁变动的 UI 组件——过多的快照更新会降低测试价值。在这些场景中，传统的 expect 断言通常是更合适的选择。理解快照测试的适用边界有助于避免滥用。
本工具是否需要安装或注册账号？
不需要。Jest 快照差异查看器是一款纯在线工具，无需安装任何软件或浏览器插件，也无需注册账号。打开页面即可直接使用，所有对比操作在浏览器本地完成，不会将任何数据上传到服务器。这使得工具非常适合处理包含企业敏感代码的快照文件，完全消除了数据泄露的风险。
支持对比多大的快照文件？
本工具的文本输入区域支持大容量文本输入，可以处理包含数千行内容的大型快照文件。对比算法在浏览器中以毫秒级完成，即使面对较大的文件也能保持流畅响应。不过，对于特别巨大的快照文件（超过数万行），建议先考虑优化快照结构，使用自定义序列化器压缩输出，或拆分为多个小快照，以保持快照的可维护性。
忽略首尾空格选项的作用是什么？
忽略首尾空格选项会在对比前去除每行内容首尾的空格和制表符。这在以下场景中非常有用：代码格式化工具（如 Prettier）调整了缩进但未改变内容语义；不同编辑器设置导致的缩进风格差异（2空格 vs 4空格）；复制粘贴时意外引入的首尾空白字符。启用此选项后，这些格式层面的差异将被自动忽略，让开发者专注于内容本身的变更。
如何获取两个版本的快照内容用于对比？
有多种方式可以获取需要对比的快照内容。方式一：直接从 __snapshots__ 目录中复制 .snap 文件内容。方式二：使用 Git 命令获取历史版本，例如 git show HEAD~1:path/to/file.snap 获取上一个版本，git show HEAD:path/to/file.snap 获取当前版本。方式三：在终端中运行 Jest 测试时，测试失败的输出会显示期望值和实际值，可以直接复制。方式四：使用 git diff 命令查看快照文件的变更。获取后将两个版本分别粘贴到本工具的左右文本区域即可开始对比。