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