React 是一个流行的前端框架，用于构建单页应用程序。作为一个 React 开发者，我们需要测试我们的组件，以确保我们的应用在不同的环境下都有正常的表现。Jest 是一个流行的测试框架，它提供了许多实用的测试特性，其中之一就是 Snapshots。
Snapshots 可以让我们轻松地测试一个 React 组件，它的工作方式类似于屏幕截图。当我们第一次运行测试时，Jest 会生成一个快照文件。当我们每次运行测试时，Jest 将当前生成的结果与快照进行比较，以检查组件是否有任何变化。
如何使用 Snapshots
使用 Snapshots 很简单，只需要一个 toMatchSnapshot() 函数即可。将其用于组件测试，Jest 会自动生成一个名为 .snap 文件的快照文件。
以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - -------------------- ----
------------------------------------
--
--当我们第一次运行此测试时，Jest 会生成一个名为 MyComponent.test.js.snap 的快照文件，其中包含了组件的渲染输出。每次执行测试时，Jest 会将当前生成的输出与快照进行比较，并在生成的快照与最新的输出不匹配时，测试失败。
Snapshots 的优点与缺点
Snapshots 具有许多优点，包括：
- 速度快：与手动比较输出差异相比，Snapshots 可以快速发现组件的变化。
- 便于维护：Snapshots 可以轻松地找到输出差异，因此可以更轻松地维护测试代码。
- 细节也有所反映：快照可以准确地反映组件的细节，包括 CSS 样式、HTML 和任何其他渲染输出。
然而，Snapshots 也有一些缺点：
- 潜在的破坏性：如果我们更改了 React 组件的 DOM 层次结构或样式，快照则会失效，我们需要手动更新快照文件。如果我们不小心另存为了新文件，Jest 就不能对组件进行正确的测试。
- 脆弱性：Snapshots 对于测试组件的可读性非常敏感，而组件的可读性可能会受到很多因素的影响，例如不同的浏览器或投机取巧的JS写法。
考虑到以上优点与缺点，Snapshots 应该与手动测试、单元测试和其他测试方案一起使用，以确保组件的充分测试。
深入理解 Snapshots
Snapshots 不仅仅是一种工具，还可以帮助我们更深入地理解 React 组件。在使用 Snapshots 时，我们可以注意到以下有趣的点：
- Snapshots 可以帮助我们更好地理解组件的结构：通过观察组件的快照，我们可以更好地理解组件的结构，例如组件内部的 DOM 层次结构和嵌套组件的结构。
- Snapshots 可以帮助我们更好地理解组件的行为：通过观察组件的快照和 Jest 的失败信息，我们可以更好地理解组件的行为，例如组件如何处理不同的输入。
- Snapshots 可以帮助我们更好地理解组件的样式：通过观察组件的快照，我们可以更好地理解组件的样式，并更好地理解 CSS 对组件的影响。
结论
Snapshots 是一项非常有用的 React 组件测试工具，它可以帮助我们自动化测试组件，并且可以帮助我们更深入地理解组件的行为、样式和结构。然而，Snapshots 也具有潜在的破坏性和脆弱性，因此应该与手动测试、单元测试和其他测试方案一起使用，以确保组件的充分测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675222b38bd460d3ad913267