简介
jest-snapshots 是 Jest 自带的快照测试工具，它对前端项目的 UI 测试有很大的帮助。使用 jest-snapshots 可以轻松地创建 UI 组件的快照，以便在后续的测试中进行比较。本文将介绍如何使用 jest-snapshots 进行前端项目的 UI 测试。
安装 Jest
首先需要安装 Jest，可以使用 npm 进行安装：
npm install --save-dev jest
安装 jest-snapshots
接下来需要安装 jest-snapshots 包：
npm install --save-dev jest-snapshot
或者：
yarn add --dev jest-snapshot
创建测试文件
在项目中创建 tests 文件夹，再在该文件夹下创建 UI 组件的测试文件，如 Button.test.js。
编写测试用例
在测试文件中编写 UI 组件的测试用例，如下所示：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ---------------------- ------ ------ ---- ------------ ------------ ------- ----------- -- -- - ----- --------- - ----------------------- ---- ----- ---- - ------------------- ------------------------------- ---
该测试用例使用了 renderer.create 函数创建了一个 Button 组件的快照。expect(tree).toMatchSnapshot() 会将该组件的快照与之前的快照进行比较，以验证组件是否正常渲染。
运行测试
使用 Jest 运行测试，可以在 package.json 文件中添加如下的代码：
{
"scripts": {
"test": "jest"
}
}然后运行以下命令即可运行测试：
npm test
运行结果
运行测试后，jest-snapshots 会自动将组件的快照保存在 snapshots 文件夹下，格式类似于 Button.test.js.snap。
如果组件的 DOM 结构发生了变化，运行测试会失败，需要手动进行快照更新。执行以下命令可以生成快照更新的 diff：
npm test -- -u
总结
jest-snapshots 可以很方便地进行前端项目的 UI 测试。使用该工具可以极大地提高开发效率，同时也可以保证项目的质量。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5851ab1864dac66e21