使用 Enzyme 和 Jest 对 React 组件进行测试

前言

React 是现代 Web 开发中广泛使用的一个 JavaScript 库，它使得构建用户界面变得更加简单。但是，即使你是一个经验丰富的 React 开发者，在构建复杂组件的过程中，也难免出现一些错误和缺陷。这时候就需要使用测试来确保代码的正确性和一致性。本文将向您展示如何使用 Enzyme 和 Jest 对 React 组件进行测试。

简介

Enzyme 是一款 React 组件测试工具，能够模拟 React 组件的行为和结构，并提供了一组用于渲染、遍历和断言的实用函数。Jest 是一个流行的 JavaScript 测试框架，支持快速、简单的测试，能够运行在浏览器环境和 Node.js 环境中。Enzyme 和 Jest 的结合，能够提供强大的测试工具，使得开发高质量 React 组件变得更加容易。

安装

首先，需要安装 Enzyme 和 Jest。打开终端，输入以下命令：

npm install --save-dev enzyme jest enzyme-adapter-react-16

• enzyme 是 Enzyme 的核心库。
• jest 是 Jest 测试框架。
• enzyme-adapter-react-16 是与 React 对应的 Enzyme 适配器.

编写测试

在开始编写测试之前，让我们来了解一下测试驱动开发（TDD）的基本流程：

1. 编写测试用例（先写测试再写代码）。
2. 运行测试，测试应该失败，因为代码还没有被编写。
3. 编写代码。
4. 运行测试，测试应该通过。
5. 重构代码（优化代码结构、性能等）。
6. 重复上述步骤。

现在，假设我们有下面这个简单的 React 组件。

import React from 'react';

const Button = ({ text }) => <button>{text}</button>;

export default Button;

那么我们可以对其进行测试。首先，在同级目录下创建一个叫做 Button.spec.js 的文件。我们来写第一个测试用例：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------

------------------ -- -- -
  ---------- ------ - ------ ---- ------- ------ -- -- -
    ----- ------- - --------------- ----------- --- ----
    ------------------------------------------------- -----
  ---
---

这个测试用例的意思是，渲染一个 Button 组件，并检查是否正确地渲染了一个 button 标签，通过查询这个元素的文本内容来验证是否正确渲染了传递给组件的 text 属性值。

在这个测试过程中，我们使用了 shallow 函数来创建一个轻量级的 Button 组件的包装器，该包装器只渲染了组件的第一层元素（也就是 button 元素）。

接下来，我们需要在 package.json 文件中添加以下内容，以便使用 Jest 进行测试：

{
  "scripts": {
    "test": "jest"
  }
}

现在，我们可以运行 npm test 命令来运行测试，你应该可以看到测试成功。

使用断言

如果你已经写过一些测试用例了，那么你可能熟悉 expect().toBe() 形式的断言。这是 Jest 中最基本的断言形式。在 Enzyme 中，我们可以使用 expect(wrapper) 作为包装器的查询属性，比如 text()、find()、hasClass() 等等。

在上面的测试用例中，我们使用了 expect(wrapper.find('button').text()).toBe('Click Me') 作为断言语句。重要的是要测试你的组件的正确性，包括正确地呈现UI元素、正确地处理交互和事件处理程序等等。

测试组件交互

在编写测试用例时，可以模拟用户交互和事件，以验证组件的交互是否正常。我们可以使用 Enzyme 提供的 .simulate 方法来模拟用户进行操作，例如用户点击、输入事件等。例如：

it('state should change on click', () => {
  const wrapper = shallow(<Button text="Click Me" />);
  wrapper.find('button').simulate('click');
  expect(wrapper.state('isActive')).toBe(true);
});

这个测试用例的目的是验证组件的点击事件是否被正确地触发，并且组件的状态是否已更改。使用 simulate 方法在包装器上模拟一个点击事件，再次使用断言，确保状况是否已更改。

测试异步函数

测试异步函数时，需要使用 Jest 提供的 async 和 await 语法。例如，下面这个测试异步获取数据的功能：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ----------------

-------------------

----------------------- -- -- -
  ---------- ------ ------- ------ ----- -- -- -
    ----- ---- - - ----- -- --- -- ------ ----- ------ -- --
    ----------------------------------

    ----- ------- - ------------------ ----
    ----- ---------------------------------------

    -------------------------------------------------
    -------------------------------------------
    ----------------------------------------------- --------
  ---
---

使用 Jest 提供的 mockResolvedValue 来模拟一个 API 请求的返回数据，并使用 await 等待数据返回，再使用断言验证数据是否正确地呈现。

总结

本文向您展示了如何使用 Enzyme 和 Jest 对 React 组件进行测试。测试是一个非常重要的开发环节，可以保证代码的正确性和一致性，减少错误和缺陷的发生，同时也可以提高代码的可维护性和可扩展性，帮助开发人员更快地开发出高质量的 React 组件。尝试使用本文提供的示例代码来测试你的 React 组件，并通过 TDD 的方式一步步开发你的项目！

参考

• Enzyme Documentation
• Jest Documentation
• Testing React Components with Enzyme and Jest

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64689624968c7c53b08c46ba