Jest 是一个 Facebook 开源的 JavaScript 测试框架，它提供了一系列的工具和 API，可以让我们写出高效且可维护的测试代码。其中，Snapshot 技术是 Jest 的一个重要特性，本文将详细介绍 Jest 中 Snapshot 技术的使用方法以及注意事项。
什么是 Snapshot 技术？
Snapshot 技术是 Jest 中的一种用于测试组件（或函数）的方法。它通过将组件渲染后的 HTML、CSS 以及 JavaScript 代码储存在文件中，然后在后续的测试执行中，与之前储存的代码进行比较，来判断组件是否出现了不一致的情况。
得益于快照对比的方式，Snapshot 技术能够快速准确地检测出组件是否发生了意料之外的变化，从而提高了代码质量和测试效率。
Snapshot 技术的使用方法
配置 Jest
在使用 Snapshot 技术前，我们需要在 Jest 的配置文件（通常为 jest.config.js）中进行相应配置，以告诉 Jest 我们想要将哪些组件进行快照测试。
module.exports = {
// ...
snapshotSerializers: ['enzyme-to-json/serializer'],
// ...
};在上述配置中，我们使用了名为 enzyme-to-json/serializer 的序列化器，它可以让 Jest 将使用 Enzyme 渲染的组件转化为 JSON 格式，方便进行快照比较。
编写测试用例
在 Jest 中，我们可以使用 expect() 方法来断言代码的行为。当我们想要使用 Snapshot 技术时，我们需要将断言的对象改为组件本身，然后调用 toMatchSnapshot() 方法，将组件储存在快照文件中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---运行上述测试用例后，Jest 将会在项目根目录下的 __snapshots__ 文件夹中创建一个名为 MyComponent.test.js.snap 的快照文件。当你再次运行测试时，Jest 会将组件的渲染结果与该快照文件进行比较，从而判断组件是否有变化。
如果组件的快照与之前储存的版本不同，Jest 将会在测试结果中标记该测试用例为失败。
更新快照文件
当我们在修改组件时，并不是所有的变化都是由于我们的代码变动引起的。例如，我们可能修改了样式表，或者添加了一个有默认值的 prop，这些变化都会导致快照测试失败。
这时，我们需要手动更新快照文件。在测试失败的情况下，Jest 会给出一个命令，以让我们快速地更新快照文件。
Jest has detected a change in: my-component.test.js ⚠️ To fix this issue, run: npm test -- -u
在上述命令中，-u 的意思是 “update”，也就是要求 Jest 更新现有的快照文件。运行这个命令后，Jest 将会重新生成快照文件，并将其保存在 __snapshots__ 文件夹中。
需要注意的是，不要将每种变化都认为是意料之外的。在更新快照文件前，务必检查代码是否确实有变化。
快照测试的妙处
快照测试极大地简化了组件（函数）测试的流程。它不像单元测试那样，需要考虑组件的各种状态和条件分支；也不像集成测试那样，需要准备一整套 Mock 数据和依赖环境。快照测试只需要将组件渲染一次，然后进行快照比较即可。
此外，快照测试提供了非常直观的测试结果。当测试失败时，我们可以直接比较组件的快照和实际渲染结果，快速定位问题所在，尤其适用于 UI 组件测试。
总结
本文详细介绍了 Jest 中的 Snapshot 技术，并指导了读者如何使用该技术完成组件的快照测试。快照测试能够极大地提高测试效率和代码质量，但需要注意有意义的变化才值得更新快照文件。
在进行组件测试时，建议读者首先考虑是否需要使用快照测试。在确定使用快照测试后，再结合其他测试方法对组件进行全面的测试，以确保组件的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7210448841e98943b40e7