在前端开发中，测试是非常重要的一环。而测试中的快照测试，能够轻松地检查代码是否符合预期，从而提高测试的覆盖范围和准确性，也可以避免某些未知的 bug。
在这篇文章中，我们将会介绍一个相对比较新的 NPM 包 snapshot-assertion，它可以让我们轻松地在测试中使用快照来进行检查。
什么是快照测试？
快照测试是一种基于比较结果的测试方法，比起常规的基于代码执行结果的测试，这种方法更加简单快捷直观。它的原理是在测试第一次运行时，生成一个快照并存储下来。之后每次测试运行时，都会生成一个新的快照并与之前存储的快照进行比对。如果两个快照相同，那么测试就通过了；如果快照不同，那么就说明代码出了问题。
这种测试方法的优点是能够减少重复的代码，同时也能够检查代码的变化是否符合预期。这对于一些变化比较频繁的代码来说，是非常有用的。
什么是 Snapshot-Assertion？
Snapshot-Assertion 是一个开源的 NPM 包，它可以让我们在测试中快速并且简单地使用快照来进行检查。这个包基于 Jest 提供的 snapshot 功能，使得我们可以直接在测试代码中使用快照，而不需要额外的代码和配置。
使用 Snapshot-Assertion 的好处是，可以让我们在测试代码中更加清晰地描述出测试的目的和预期结果，从而提高测试的可读性和可维护性。而且对于一些组件化和模块化的代码来说，快照测试也非常适用。
如何使用 Snapshot-Assertion？
下面是一个使用 Snapshot-Assertion 的示例代码：
-- -------------------- ---- -------
------ - ----- - ---- -----------------
------ ----------- ---- -------------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ------------------
-----------------------------------------
--
--上面这段代码用来测试一个 Vue 组件 MyComponent 的渲染是否正确，如果渲染正确，那么快照测试就会通过。
在上面的代码中，我们首先引入 Vue Test Utils 的 mount 方法，然后引入我们要测试的组件 MyComponent。接着，在测试用例中，我们使用 mount 方法把 MyComponent 渲染出来，在下一行代码中，我们使用 expect 断言来检查 wrapper 对象是否和之前生成的快照一致。如果一致，测试就通过了。
这里的 expect().toMatchSnapshot() 就是 Snapshot-Assertion 的核心内容，它会把目标对象序列化成一个 JSON 字符串，并与之前的快照进行比较。如果两个快照一致，测试就通过了。
最后，我们需要在 package.json 文件中添加如下配置：
{
"jest": {
"snapshotSerializers": ["<rootDir>/node_modules/snapshot-assertion/serializer.js"]
}
}这段配置的作用是告诉 Jest 使用 snapshot-assertion 中的 serializer.js 来进行快照的序列化和比较。
总结
快照测试是一种简单、快捷、直观的测试方法，而 Snapshot-Assertion 则是一种让我们轻松使用快照测试的 NPM 包。使用这个包，可以让我们更方便地进行快照测试，并且能够提高测试的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad2cb5cbfe1ea0610bf8