在前端开发中，测试用例在保障代码质量和稳定性方面担当了重要的角色。但是，当测试代码需要修改时，重复的手动修改测试用例也是一件很麻烦的事情。这时，我们就可以使用 Jest 中提供的 Snapshot 工具来优化测试用例的维护。
什么是 Jest 中的 Snapshot 工具
Snapshot 工具是 Jest 提供的一种机制，可以记录测试用例的生成结果并将其保存在文件中。当测试用例发生变化时，工具会比较新旧两次的结果并适当地提示需要更新此测试用例。
在使用 Jest 中的 Snapshot 工具时，每个测试用例都会生成一个文本快照。这样，当我们需要手动更改测试用例时，就可以轻易地将更改内容同步到快照文件中。
Jest 中的 Snapshot 工具的优点
使用 Jest 中的 Snapshot 工具具有以下几个优点：
- 可以自动生成测试用例的文本快照，省去了手动编写测试用例的成本；
- 通过对比快照文件和生成文件的差异，可以发现我们对代码的更改带来了哪些影响，从而更加方便地进行调试和修复；
- 快照文件经过 git 管理，可以方便地回溯测试用例的历史记录，便于查找问题。
Jest 中的 Snapshot 工具的应用
我们来看一个具体的例子。假设我们有一个简单的 React 组件：Button。
-- -------------------- ---- ------- ------ ----- ---- -------- --------- ----------- - -------- -- -- ----- --------- ------- - ----- ------- --------------------- - -- -------- -------- -- -- - ------- ------------------------------------- -- ------ ------- -------
我们要测试的内容是，当用户点击按钮时，onClick 函数被正确地执行。我们可以用 Jest 编写一个如下的测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ ------ ---- -----------
------------------ -- -- -
------------- -- -- -
----- - --------- - - -------------- ----------- -- --------- -------------
------------------------------------
---
------------ -- -- -
----- ------- - ----------
----- - --------- - - -------------- ----------------------- -------------
----------------------------------------------------
-----------------------------------
------------------------------------
---
---我们可以看到，我们使用了 Jest 提供的 container 对象，通过对 container 进行快照测试，来确保组件表现如预期。
当我们更改了 Button 的实现时，例如：
-- -------------------- ---- ------- ------ ----- ---- -------- --------- ----------- - -------- -- -- ----- --------- ------- ------ ------- - -------- - ----- ------- --------------------- - -- -------- --------- ---- - ------- -- -- - ------- ----------------- ------------------ ----------------------------- -- ------ ------- -------
我们运行测试后，发现测试用例会因为 Button 的更改而出现错误：
The snapshot does not match the received component.`
这时我们就需要根据提示手动更新相应的快照文件：
npm run jest -- -u
这就相当于手动将测试用例中的预期结果与新生成的快照进行了同步，问题就得以解决。
总结
使用 Jest 中的 Snapshot 工具可以很好地解决测试用例修改的问题。我们可以建立测试快照，并使用 git 进行版本化和跟踪，从而大大简化测试用例的维护。在进行总结前，请务必注意快照测试工具不适用于所有情况。其中最常见的一个问题是图片和其他二进制文件形成的输出不易于快照。
如果您发现自己不得不维护大量的二进制文件，请确保对其进行单独的测试，以确保对其最终输出的内容的正确性的检查。但是，对于纯文本或非二进制文件，Jest 的快照测试工具可以让你的测试用例极易维护，方便您自由地进行测试代码的开发和迭代。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459d533968c7c53b0bf3904