在前端开发中，我们经常需要写一些 UI 组件，并对其进行测试。其中之一就是进行快照测试，也称为快照测试或视觉回归测试。快照测试可以让我们轻松地检查 UI 组件是否正常工作，确保代码更改不会破坏现有的 UI 效果。在 Jest 中进行快照测试非常容易且非常常用，它使测试开发变得更加简单和高效。下面让我们来详细了解快照测试的使用以及使用 Jest 实现快照测试的方法。
什么是快照测试
快照测试是一种自动化测试类型，其技术原理是用代码生成 UI 片段的静态快照，比较新的快照和旧的快照，如果相同则测试通过，否则测试失败。与其他测试类型相比，快照测试是一种非常简单且直观的测试类型，它与 UI 设计紧密相关，在组件更新后，可以通过查看快照，维护 UI 设计质量，减少手动测试的工作量。
Jest 和快照测试
Jest 是一个流行的 JavaScript 测试框架，它提供了一种很容易实现快照测试的方法。Jest 可以很容易地生成 UI 元素的快照，将快照与先前快照进行比较，并标识差异。Jest 快照测试是基于 React 组件实现的，但是它也可以用于其他 UI 框架的 UI 测试。
创建一个快照测试
在 Jest 中，我们可以使用 toMatchSnapshot() 函数创建一个快照检查点。以下是一个组件的例子:
------ ----- ---- --------
------ ------ ---- -----------
------------------ -- -- -
------------- ----------- -- -- -
----- ------ - ----------------------------- --------------------------
---------------------------------
---
---在这个例子中，toMatchSnapshot() 函数将接收组件的快照，并将其与存储在文件中的最新快照进行比较。如果快照发生变化，测试将失败。如果我们确定这个更改是正确的，可以通过运行 jest --updateSnapshot 命令更新存储的快照。更新快照时，我们需要仔细检查所做的更改，并确保更新后的快照是正确的。
优化快照测试
当我们开始编写快照测试时，我们可以考虑一些技巧来优化测试：
- 使用属性快照：在属性快照中，可以直接获取每个元素的属性以及其值，可以减少出错概率。
- 使用手动序列化：在使用自动快照时，某些组件可能无法自动序列化。在这种情况下，可以使用手动序列化，将组件转换为字符串，并生成快照。
- 忽略重要的字段：如果我们连接到外部 API，数据可能会有一些变化。在这种情况下，我们可以过滤掉不需要检查的字段。
下面是快照测试的优化示例：
------ ----- ---- --------
------ - -- -------- ---- ----------------------
------ ------ ---- ------------------------------
------------------ -- -- -
------------ ------ ----------- -- -- -
----- ---- - ----------------------- ------------ --- -------------
------------------------------
-------- ---------------------
------ -------------------
---
---
---通过上述优化可以提高测试的准确性和可靠性，快照测试会告诉我们哪些组件的样式或属性发生了变化。这种变化可能说明我们需要更新代码，可能需要更改设计，或者我们不想更新快照，这取决于我们的具体情况。
结论
通过使用 Jest 的快照测试功能，我们可以轻松地在开发 UI 组件时检查组件的外观和行为，并确保其实现的一致性。这节课中我们了解了什么是快照测试，如何在 Jest 中实现快照测试，并提高了测试的准确性和可靠性。在实际的工作中，快照测试也是非常常用的一种测试手段，需要我们学习并掌握。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6718b3d0ad1e889fe22da517