在编写 React 应用程序或组件时，测试是一项非常关键的任务。Jest 是一个流行的 JavaScript 测试框架，它提供了 Snapshot 测试，这是一种通过比较预期结果和实际结果的方式来测试组件的输出的简单而有效的方法。
在本文中，我们将学习如何使用 Jest 的 Snapshot 测试来测试 React 组件。我们将探讨如何安装 Jest、如何创建快照测试，并在其中包括一些实用的示例代码和最佳实践。
安装 Jest
首先，我们需要安装 Jest。我们可以使用 npm 包管理器来完成：
npm install --save-dev jest
此命令将在本地安装 Jest。请注意，Jest 需要 Node.js 环境来运行。
创建一个简单的 React 组件
在我们深入研究快照测试之前，我们需要一个简单的 React 组件来测试。这里是一个简单的组件：
import React from 'react';
function Greeting({ name }) {
return <div>Hello, {name}!</div>;
}
export default Greeting;该组件接收一个 name 属性，并在 div 元素中显示欢迎消息。现在，我们已经有了一个简单的组件，让我们来学习如何使用 Jest 的 Snapshot 测试。
在 Jest 中编写 Snapshot 测试
Snapshot 测试是一种基于比较实际输出和预期输出的方式进行测试的方法。当我们运行一个快照测试时，Jest 会自动创建一个 JSON 文件，并将组件的输出序列化到该文件中。下一次测试运行时，Jest 将加载该 JSON 文件，并将组件的实际输出与此文件中存储的预期输出进行比较。
让我们开始创建我们的第一个快照测试。首先，我们将创建一个新的测试文件 Greeting.test.js：
import React from 'react';
import renderer from 'react-test-renderer';
import Greeting from './Greeting';
test('Greeting component renders correctly', () => {
const tree = renderer.create(<Greeting name="World" />).toJSON();
expect(tree).toMatchSnapshot();
});在此测试中，我们使用 renderer.create 方法将 Greeting 组件呈现为 JSON 格式。接下来，我们使用 Jest 提供的 toMatchSnapshot 方法将输出与预期结果进行比较。
在第一次运行测试时，Jest 将从我们的代码中自动创建一个新的 JSON 文件。如果该测试通过，该文件将用作此组件的预期输出。
每次测试运行后，Jest 将比较实际输出和预期输出，并提供有关输出差异的详细信息。这使得识别和修复错误变得更加容易。
进一步探索 Jest 的快照测试选项
Jest 提供了许多选项来定制快照测试的行为。以下是一些最常用的选项：
toMatchSnapshot()：比较输出与预期输出，如果不匹配则测试失败。toMatchInlineSnapshot()：在测试代码中直接编写预期输出。updateSnapshot选项：更新预期输出，以避免出现错误的设置。
示例：
-- -------------------- ---- -------
-------------- --------- ------- ----------- -- -- -
----- ---- - ------------------------- ------------ -------------
-------------------------------
---
-------------- --------- ------- --------- --------------- -- -- -
----- ---- - ------------------------- ------------ -------------
------------------------------------
-----
------ ------
------
---
---
-------------- --------- ------- --------- ----- ------- ----------- -- -- -
----- ---- - ------------------------- ------------ -------------
-------------------------------
-- - --------------- ---- ---最佳实践
- 在每个组件的目录中创建一个测试文件。
- 编写多个快照测试，以涵盖组件的各个用例。
- 避免在输出中包含不必要的信息，如随机字符串或复杂的计算结果。这可以通过使用自定义对象序列化程序来解决。
- 经常更新快照，并确保审查更改以确保它们正确无误。
- 避免在快照测试中引入过多的耦合。如果您的测试代码需要组件的实现细节，那么您可能需要重新考虑测试的目的。
结论
使用 Jest 的 Snapshot 测试是一种简单而有效的测试组件输出的方法。它是一个流行的测试框架，可以帮助您轻松地测试您的 React 组件。快照测试可以保存您的时间和精力，并确保在更改您的组件时不会破坏已存在的功能。
现在，您已经了解了如何使用 Jest 的快照测试来测试您的 React 组件。所以，尝试在您的下一个 React 项目中使用它，并与我们分享您的经验吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673870f1317fbffedf108551