Jest 是一个流行的 JavaScript 测试框架，它支持多种测试方式，包括一种称为 snapshot 测试的快照测试。在 React 开发中，我们可以使用 snapshot 测试来测试组件是否按预期渲染和输出。
什么是 Snapshot 测试
快照测试又称为基准测试。它是一种自动化测试，通过将组件的输出与预期快照进行比较来验证组件的行为是否正确。在 Jest 中，快照是一个序列化的输出，它包含组件的状态和组件的 DOM 结构。在每次运行测试时，Jest 会将组件的输出与预期快照作比较，如果有差异就会提示我们。
在 React 中，我们可以使用 Jest 来创建快照测试。我们只需输出组件的标记，将其保存为一个快照文件，然后在测试中将输出与快照进行比较。
快速开始
首先，我们需要安装 Jest：
npm install --save-dev jest
然后，我们需要创建一个测试文件，例如 Example.test.js。在这个文件中，我们需要创建一个测试用例，描述我们要测试的组件。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------
------ -------- ---- ----------------------
------------- ----------- -- -- -
----- --------- - ----------------
-------- --
--
--- ---- - -------------------
-------------------------------
---在这个测试中，我们使用 Jest 中的 expect(tree).toMatchSnapshot(); 来检查组件的输出是否与快照匹配。如果输出与快照不匹配，Jest 将会提示我们。
然后，我们需要运行 Jest，在控制台中输入：
npm test
这将运行所有测试，包括我们刚刚编写的测试。我们会收到一个类似如下的提示：
-- -------------------- ---- ------- -------- ---- ------ ---- ----- -------- ----- ---------- --- --------- ------- --------- ----------- - -------- - -------- -- ---- ---- -- ---- --------------------- - - ------- - ------- --------- ------
这个提示告诉我们，组件的输出与快照不匹配。在这个例子中，我们只需更新快照，然后再次运行测试。
进阶用法
当我们需要测试包含动态内容的组件时，我们需要使用快照测试的高级用法。
例如，我们的组件包含一个从外部获取数据的异步操作。我们需要模拟这个异步操作，并在组件渲染完成后输出快照。
首先，我们需要安装 axios，用于模拟异步操作：
npm install --save-dev axios
然后，我们可以创建一个模拟的异步操作：
import axios from 'axios';
export default function getData() {
return axios.get('/data').then(response => response.data);
}在我们的组件中，我们可以使用 getData 函数来获取数据，并在渲染完成后输出快照：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ------- ---- ------------
------ ------- -------- --------- -
----- ------ -------- - -------------
------------ -- -
------------------- -- ---------------
-- ----
------ -
---- ----------------------
---------------------
---------------------
------
--
-最后，我们需要更新测试代码，以便等待异步操作完成并输出快照：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ------------
------ -------- ---- ----------------------
------ ----- ---- --------
------ ----------- ---- ---------------------
------------- ----------- ----- -- -- -
----- ---- - --- -------------------
------------------------------ -
------ ------ -------
-------- ----- -- - -----
---
----- --------- - ----------------
-------- --
--
----- --- --------------- -- ------------------- ------- -- --------
--- ---- - -------------------
-------------------------------
---在这个测试中，我们使用了 axios-mock-adapter 来模拟异步操作。我们使用 await new Promise(resolve => setTimeout(resolve, 1000)); 来等待异步操作完成。
现在，我们可以运行测试，它会等待异步操作完成并输出快照。
结论
在 React 开发中，使用 Jest 和快照测试是一个强大且方便的测试工具。它可以帮助我们检查组件是否正确渲染，同时避免了手动编写大量的测试代码。
在使用快照测试时，我们需要注意以下事项：
- 我们需要创建一个测试用例来描述要测试的组件。
- 测试输出应与预期快照匹配。如果不匹配，Jest 将会提示我们。
- 在测试输出包含动态内容的组件时，我们需要使用高级测试用法，并等待异步操作完成。
希望本文可以帮助你更好地使用 Jest 和快照测试。完整的代码示例可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775e8e76d66e0f9aa06f5ce