Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它支持多种测试类型，包括单元测试、集成测试和端到端测试等等。其中，快照测试是 Jest 最为流行的一种测试类型之一，它可以帮助前端开发人员轻松地捕获组件渲染结果，并在测试结果变更时发出警告。在本文中，我们将详细介绍 Jest 快照测试的产生和使用。
什么是 Jest 快照测试
Jest 快照测试是一种测试方法，它可以在组件或页面生成 HTML、CSS 或 JSON 等渲染结果时，将结果保存到一个快照文件中。当下一次运行测试时，Jest 将组件或页面渲染结果与先前保存的结果进行比较，如果两者不同，就会标记测试失败，并提醒我们检查代码是否出现了问题。快照测试可以用于测试纯前端组件、组件的交互、CSS 样式或页面结构等方面。由于快照测试可以捕捉实际渲染的结果，测试者无需手动编写测试用例，测试代码编写速度也大大加快。
如何生成 Jest 快照测试
要为前端组件或页面生成 Jest 快照测试，我们需要两个主要的工具：一个是 Jest 测试框架本身，另一个是 React Test Renderer。React Test Renderer 是一个用于渲染 React 组件并捕获渲染结果的工具，它可以帮助我们轻松地生成快照测试代码。
安装 Jest 和 React Test Renderer
要使用 Jest 快照测试，我们需要在项目中安装 Jest 和 React Test Renderer：
npm install --save-dev jest react-test-renderer
编写快照测试代码
接下来，我们将在项目中为一个 React 组件编写快照测试代码，并生成一个快照文件。我们编写一个名为 HelloWorld 的组件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------- - -- -- -
------ -
-----
---------- -----------
------- -- - ---- --------------
------
--
--
------ ------- -----------接着，我们编写名为 HelloWorld.test.js 的测试文件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
------ ---------- ---- ---------------
---------------------- -- -- -
------------- ----------- -- -- -
----- ---- - --------------------------- -------------
-------------------------------
---
---在测试文件中，我们使用 renderer.create() 方法渲染 HelloWorld 组件，并通过 toJSON() 方法将渲染结果转换成 JSON 串。接着，我们使用 toMatchSnapshot() 方法，将渲染结果保存到一个快照文件中。由于我们是第一次生成快照，所以会提示我们确认生成快照文件，输入 u 即可。
运行 Jest 命令
最后，我们可以运行 Jest 命令来执行测试文件，命令如下：
npx jest HelloWorld.test.js
运行完成后，我们可以在项目根目录下得到一个名为 __snapshots__ 的文件夹。该文件夹中包含了我们编写的测试文件的快照文件，文件名格式为 <测试文件名>.test.js.snap。
如何使用 Jest 快照测试
在项目开发过程中，如果出现组件渲染结果有所变化，就需要更新快照文件。我们可以通过编辑器快捷键，或者在命令行中输入 npm test -- -u 来更新快照文件。
在编写实际的测试代码时，我们可以使用 Jest 提供的 toMatchSnapShot() 方法来将组件渲染结果与快照文件进行比较。如果相同，测试通过，否则测试失败并提示我们检查代码。
test('renders correctly', () => {
const tree = renderer.create(<HelloWorld />).toJSON();
expect(tree).toMatchSnapShot();
});为了更好的测试覆盖率，我们可以在测试代码中添加额外的测试用例，例如：
-- -------------------- ---- -------
------------- --------- ---- ------- -- -- -
----- ---- - --------
------------------- ----------- ------ ------------- -------- ---
----------
-------------------------------
---
------------- --------- ----- ------- -- -- -
----- --------- - --------------------------- ----
----- ---- - -------------------
-------------------------------
--------------------------------------
---------------------------------------------
---最佳实践
在使用 Jest 快照测试时，我们需要注意以下几点：
- 避免因时间戳等原因导致渲染结果不稳定。在编写组件时，需要注意样式和功能的稳定性，并尽量消除随机的因素。
- 适当地使用明确的 Props。在编写测试代码时，我们可以通过传递不同的 Props，从不同角度上进行测试，可以极大提高测试代码的覆盖率。
- 避免在渲染元素中使用自动生成的类名，因为这样会导致在每次渲染时类名都会产生变化，使得快照测试需要不断更新快照文件。
结论
本文中，我们介绍了 Jest 快照测试的基本概念和使用方法，并提供了一些最佳实践来帮助开发人员更好地使用快照测试。使用 Jest 快照测试可以有效地减少手动编写测试用例的工作量，并提高测试代码可维护性和稳定性，使得我们可以更加专注于组件和页面的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670642cad91dce0dc85abf1e