前言
React 是现代 Web 开发中广泛使用的一个 JavaScript 库，它使得构建用户界面变得更加简单。但是，即使你是一个经验丰富的 React 开发者，在构建复杂组件的过程中，也难免出现一些错误和缺陷。这时候就需要使用测试来确保代码的正确性和一致性。本文将向您展示如何使用 Enzyme 和 Jest 对 React 组件进行测试。
简介
Enzyme 是一款 React 组件测试工具，能够模拟 React 组件的行为和结构，并提供了一组用于渲染、遍历和断言的实用函数。Jest 是一个流行的 JavaScript 测试框架，支持快速、简单的测试，能够运行在浏览器环境和 Node.js 环境中。Enzyme 和 Jest 的结合，能够提供强大的测试工具，使得开发高质量 React 组件变得更加容易。
安装
首先，需要安装 Enzyme 和 Jest。打开终端，输入以下命令：
--- ------- ---------- ------ ---- -----------------------
enzyme是 Enzyme 的核心库。jest是 Jest 测试框架。enzyme-adapter-react-16是与 React 对应的 Enzyme 适配器.
编写测试
在开始编写测试之前，让我们来了解一下测试驱动开发（TDD）的基本流程：
- 编写测试用例（先写测试再写代码）。
- 运行测试，测试应该失败，因为代码还没有被编写。
- 编写代码。
- 运行测试，测试应该通过。
- 重构代码（优化代码结构、性能等）。
- 重复上述步骤。
现在，假设我们有下面这个简单的 React 组件。
------ ----- ---- -------- ----- ------ - -- ---- -- -- ------------------------ ------ ------- -------
那么我们可以对其进行测试。首先，在同级目录下创建一个叫做 Button.spec.js 的文件。我们来写第一个测试用例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ------ - ------ ---- ------- ------ -- -- -
----- ------- - --------------- ----------- --- ----
------------------------------------------------- -----
---
---这个测试用例的意思是，渲染一个 Button 组件，并检查是否正确地渲染了一个 button 标签，通过查询这个元素的文本内容来验证是否正确渲染了传递给组件的 text 属性值。
在这个测试过程中，我们使用了 shallow 函数来创建一个轻量级的 Button 组件的包装器，该包装器只渲染了组件的第一层元素（也就是 button 元素）。
接下来，我们需要在 package.json 文件中添加以下内容，以便使用 Jest 进行测试：
-
---------- -
------- ------
-
-现在，我们可以运行 npm test 命令来运行测试，你应该可以看到测试成功。
使用断言
如果你已经写过一些测试用例了，那么你可能熟悉 expect().toBe() 形式的断言。这是 Jest 中最基本的断言形式。在 Enzyme 中，我们可以使用 expect(wrapper) 作为包装器的查询属性，比如 text()、find()、hasClass() 等等。
在上面的测试用例中，我们使用了 expect(wrapper.find('button').text()).toBe('Click Me') 作为断言语句。重要的是要测试你的组件的正确性，包括正确地呈现UI元素、正确地处理交互和事件处理程序等等。
测试组件交互
在编写测试用例时，可以模拟用户交互和事件，以验证组件的交互是否正常。我们可以使用 Enzyme 提供的 .simulate 方法来模拟用户进行操作，例如用户点击、输入事件等。例如：
--------- ------ ------ -- ------- -- -- - ----- ------- - --------------- ----------- --- ---- ----------------------------------------- --------------------------------------------- ---
这个测试用例的目的是验证组件的点击事件是否被正确地触发，并且组件的状态是否已更改。使用 simulate 方法在包装器上模拟一个点击事件，再次使用断言，确保状况是否已更改。
测试异步函数
测试异步函数时，需要使用 Jest 提供的 async 和 await 语法。例如，下面这个测试异步获取数据的功能：
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ----------------
-------------------
----------------------- -- -- -
---------- ------ ------- ------ ----- -- -- -
----- ---- - - ----- -- --- -- ------ ----- ------ -- --
----------------------------------
----- ------- - ------------------ ----
----- ---------------------------------------
-------------------------------------------------
-------------------------------------------
----------------------------------------------- --------
---
---使用 Jest 提供的 mockResolvedValue 来模拟一个 API 请求的返回数据，并使用 await 等待数据返回，再使用断言验证数据是否正确地呈现。
总结
本文向您展示了如何使用 Enzyme 和 Jest 对 React 组件进行测试。测试是一个非常重要的开发环节，可以保证代码的正确性和一致性，减少错误和缺陷的发生，同时也可以提高代码的可维护性和可扩展性，帮助开发人员更快地开发出高质量的 React 组件。尝试使用本文提供的示例代码来测试你的 React 组件，并通过 TDD 的方式一步步开发你的项目！
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64689624968c7c53b08c46ba