简介
snap-shot 是一个基于 Jest 实现的 npm 包，它是一个快照测试工具，可以用来方便地比较数据的期望值与实际值。在前端开发中，我们经常需要测试组件、接口等功能模块的正确性，使用 snap-shot 可以更加方便地进行测试。
安装
使用 npm 进行安装：
npm install --save-dev snap-shot
配置
在项目的根目录下创建 .snap-shot.js 文件，添加如下配置：
const { configureToMatchImageSnapshot } = require('jest-image-snapshot');
const toMatchImageSnapshot = configureToMatchImageSnapshot({
noColors: true,
});
expect.extend({ toMatchImageSnapshot });上述配置引入了 jest-image-snapshot，这个库是对 snap-shot 的扩展，支持对图片进行快照测试。如果不需要测试图片，则可跳过此步骤。
使用
普通快照测试
在测试文件中导入 snap-shot：
const snapshot = require('snap-shot');
test('should return correct result', () => {
const actual = yourFunction();
expect(snapshot(actual)).toMatchSnapshot();
});其中 yourFunction() 返回需要测试的数据，snapshot(actual) 将其转化成字符串并返回。
第一次运行测试时，将会生成一个新的快照文件（.test.js.snap），存储在同级目录下。如果期望值与实际值不一致，则测试将失败，需要手动检查快照文件并决定是否更新。
图片快照测试
图片快照测试与普通快照测试类似，只需要在测试文件中导入 jest-image-snapshot，并使用 toMatchImageSnapshot() 匹配器进行匹配即可：
-- -------------------- ---- ------- ----- - -------------------- - - ------------------------------- --------------- -------------------- --- ------------ ----- ---------- ----- -- -- - ----- ------- - ----- ------------------- ----- ---- - ----- ------------------ ----- ------------------------------------- ----- ---------- - ----- ------------------ ------------------------------------------ ---
上述示例使用了 Puppeteer 进行截图，并使用 toMatchImageSnapshot() 匹配器进行匹配。
结语
通过本文的介绍，我们了解到了 snap-shot 的使用方法和配置步骤，能够更加方便地进行前端测试。同时，也学习了如何使用 jest-image-snapshot 对图片进行快照测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41983