在前端开发中，测试是一个至关重要的环节。而其中的快照测试(Snapshot Testing) 更是被认为是一种高效的测试方式。这篇文章我们将一步步介绍Jest 的 Snapshot 测试以及如何在实际开发中运用它。
快照测试是什么？
快照测试是一种自动化测试方法，它通过生成一个组件的截图或代码结构的快照来对组件进行测试和验证。 在后续的测试 中，快照可以用于比较更新前后的组件或者代码结构的不同，从而验证组件或代码的正确性。
Jest 与快照测试
Jest 是 Facebook 推出的一款 JavaScript 测试框架。它支持多种测试类型，其中的快照测试被广泛应用于React 应用中。 Jest 的快照测试是一个非常有用的测试组件以及UI呈现的方法， 通过比较组件生成的 HTML 与测试代码中指定的快照来检查组件是否输出正确的内容。
环境搭建
在开始学习 Jest 的快照测试之前，我们需要在本地安装 Jest 测试框架。具体步骤如下：
使用 npm 或者 yarn 安装 Jest。
npm install jest -D 或者 yarn add jest -D
初始化一个项目，创建一个 .babelrc 文件，并在其中配置相关内容。
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }编写测试代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ ------ ---- ----------- ---------------- ------ -- -- - ------------- ----------- -- -- - ----- ------ - ----------------------- ------------ --- ---- --------------------------------- --- ---
如上示例代码所示，首先我们需要导入需要测试的组件。接着，我们使用renderer.create方法来创建一个组件实例，然后使用 toMatchSnapshot()来生成一个组件快照。 toMatchSnapshot() 会将组件的vDOM中记录的数据生成为一个结构化的 JSON 对象，以后每次运行测试时，它将自动以快照的形式呈现在测试结果中，以便我们对比之前和现在的两个快照，以验证代码的正确性。
测试快照的更新与管理
在我们的项目中，当组件的代码结构发生变化时，上述快照代码也需要更新。 更新方式有两种：
- 手动更新
在某些情况下，我们需要手动编辑生成的快照文件。我们发现与预期输出不同的快照可以通过手动编辑来调整为预期的输出。
由于手动编辑是一种比较麻烦的方式，不建议频繁使用。
- 自动生成
Jest 提供了一些命令帮助我们自动更新组件的快照。 这里我们需要注意：当我们在项目中的组件进行了修改时，快照测试也一定要同时更新。
我们可以通过执行以下命令来更新快照：
jest -u <file.test.js>
这个命令会自动推测出哪个快照文件需要更新，然后用新的输出结果替换快照文件中旧的快照，以此来更新测试结果。通过持续运行 jest -u 命令，我们可以一直监控组件的变化并保证测试的有效性。
结论
快照测试是一种非常实用的测试手段。通过Jest 的快照测试，我们可以很好地验证 UI组件的正确性，同时更方便地管理测试结果。
在开发完成后，我们需要运行所有测试，以确保代码的正确性。如果测试失败，请检查是否有遗漏的测试用例或代码出现问题，确保组件的正确性并通过代码优化来提升代码质量。
最后，建议读者在实际开发中运用 Jest的快照测试，并结合其他测试方式，从而保证项目的质量，提升自己的开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672e2439eedcc8a97c878a7e