如果你是一名前端开发人员，肯定不会对单元测试这个话题陌生。而在单元测试过程中，快照测试（Snapshot Testing）是极为常见的一种测试方式。针对 React 组件，Jest 提供了快照测试的工具，但是对于非 React 项目，我们需要使用第三方的库来实现该功能。那么，今天我们就要为大家介绍一个功能强大、使用方便的 npm 包：create-snapshot-test。
什么是 create-snapshot-test？
create-snapshot-test 是一个基于 Jest 的 npm 包，它可以帮助非 React 项目添加快照测试功能。快照测试是测试代码逻辑的一种高效可靠的方法，它基于截图的方式记录测试结果，每次测试只需要比较新的截图和之前保存的截图是否相同即可。
如何安装 create-snapshot-test？
安装 create-snapshot-test 可以使用 npm 或 yarn，这里我们以 npm 为例进行说明：
npm install --save-dev create-snapshot-test
如何使用 create-snapshot-test 进行测试？
接下来我们将通过实例来演示如何使用 create-snapshot-test 进行测试。
创建测试文件
首先，在项目中创建一个测试文件夹，命名为 __tests__，然后创建一个测试文件 example.test.js，编写如下测试代码：
const createSnapshotTest = require('create-snapshot-test').default;
describe('example test', () => {
test('should match snapshot', () => {
const result = 'Hello World';
expect(createSnapshotTest(result)).toMatchSnapshot();
});
});上述代码使用了 Jest 的 describe 和 test 方法来定义一个测试用例，并使用 expect() 方法来判断测试结果是否符合预期。其中，createSnapshotTest 是 create-snapshot-test 提供的快照测试方法，该方法需要传入要测试的结果数据，然后使用 Jest 的 toMatchSnapshot() 方法来保存测试结果。
运行测试
运行测试命令，即可生成测试结果的快照并保存。
npm test
更新测试
当你的代码发生变化时，你需要重新运行测试来检查测试结果是否仍然正确，如果测试结果与之前保存的快照不一致，你需要手动确认更新。
npm test -- -u
create-snapshot-test 进阶使用
除了基本的使用方法之外，create-snapshot-test 还有很多高级用法和配置项可以进行设置。比如，你可以设置快照测试的比较器，配置全局的选项等等。
设置比较器
有时，你可能需要自定义比较器来处理测试结果不同的情况。create-snapshot-test 提供了 setCustomDiffConfig() 方法，可以让你自定义比较器。示例代码如下：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------------
----------------------------------------
---------- -----
---
----------------- ------ -- -- -
------------ ----- ---------- -- -- -
----- ------ - ------ -------
-----------------------------------------------------
---
---上述代码中，我们使用 setCustomDiffConfig() 方法自定义了比较器的参数 threshold，该参数表示图片的像素差异上限阈值，相差小于该值的像素将被忽略。
配置全局选项
create-snapshot-test 支持一些全局选项，它们可以用来控制测试结果输出的格式或者设定基准快照的路径。例如，我们可以使用 setGlobalConfig() 方法来设定基准快照的路径：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------------
------------------------------------
------------- ------------------------
---
----------------- ------ -- -- -
------------ ----- ---------- -- -- -
----- ------ - ------ -------
-----------------------------------------------------
---
---上述代码中，我们设定了快照测试结果的路径为 ./tests/__snapshots__。
总结
create-snapshot-test 是一款实用性强、使用方便的 npm 包，它可以帮助非 React 项目添加快照测试功能，提高开发效率和质量。无论是在开发过程中的调试，还是在上线前的稳定性测试，create-snapshot-test 都是一个十分有用的工具。如果你还没有使用过它，赶紧试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057d7c81e8991b448ec23a