React 是一个非常流行的前端框架，现在已经成为了许多前端开发人员的首选。但是，如何进行 React 组件测试呢？这里介绍如何使用 Jest 和 Enzyme 进行 React 组件测试。
Jest
Jest 是一个 Facebook 开源的 JavaScript 测试框架，它专注于简单性和速度。它具有自动化的测试运行、多种断言（断言是验证代码为真的方式）和快照测试等特性，可以帮助我们快速而可靠地对 JavaScript 代码进行单元测试。使用 Jest，我们可以轻松地测试 React 组件，而且它是配合 React 官方库最佳的测试框架。
安装和配置 Jest
我们可以使用 npm 安装 Jest：
npm install --save-dev jest
安装完成后，我们需要在项目根目录下创建一个 jest.config.js 文件，用于配置 Jest。这里提供一个基本配置（其他自定义配置可以参考 Jest 官方文档）：
-- -------------------- ---- -------
-------------- - -
-------- -----
------------------ -----------
-------------------- --------------- -------
---------------- --------
---------- -
------------------------------------- ---- --- ------
------------------------------------ ---- --- -----
--
---------- -
-------------- ------------
-
--这里说几个主要的配置项：
verbose: true用于详细输出测试结果。coverageDirectory用于存储测试覆盖率统计数据。collectCoverageFrom用于指定要测试的源代码文件。testEnvironment用于指定测试环境。testMatch用于指定 Jest 查找测试文件的规则。transform用于指定 Jest 用于编译代码的转换器。
编写测试用例代码
好的测试用例应该具有可读性、可维护性和完备性，最好不要太依赖具体的实现细节，而应该关注目标行为。一般来说，每个测试用例应包含：
- 准备（Arrange）：定义测试数据和测试环境。
- 执行（Act）：执行测试代码。
- 断言（Assert）：验证测试结果是否符合预期。
以下是一个简单的测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- ------------
------------------ -- -- -
---------- ------ ------ ------ -- -- -
----- ------- - --------------------- -------------
---------------------------------- -----
---
---首先，我们导入 React 和 Enzyme 库中的 shallow 函数，以浅渲染模式创建 Button 组件的包裹器。然后，我们使用 Jest 的 describe 函数来定义一个测试套件，用于分组我们的测试用例。在 describe 函数中，我们使用 Jest 的 it 函数来定义一个测试用例。在这个测试用例中，我们调用 expect 函数，使用 toBe 匹配器比较其内容是否为字符串 Click me。
运行测试
完成了所有测试用例的编写后，我们使用 Jest 运行测试，Jest 将执行所有文件名以 .test.js 结尾的文件中的测试套件。我们可以按照以下任何一种方式运行测试：
- 在
package.json文件中添加"test": "jest"，运行npm test。 - 直接在终端输入
jest。
Jest 将输出详细的测试结果和覆盖率信息。
Enzyme
Enzyme 是一个由 Airbnb 开发的 JavaScript 测试工具库，用于简化 React 组件的测试代码。它提供了许多 API，可以轻松地模拟浏览器环境和构建组件层次结构。使用 Enzyme，我们可以更加轻松地编写测试，同时减少测试的维护成本。
安装和配置 Enzyme
我们可以使用 npm 安装 enzyme 和适当的适配器（adapter）。enzyme 需要适配器才能与 React DOM 进行交互。这里我们使用 enzyme-adapter-react-16：
npm install --save-dev enzyme enzyme-adapter-react-16
安装完成后，我们可以在 setupTests.js 文件中进行全局配置。在这个文件中，我们导入适配器并执行设置：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });测试示例
以下是一个使用 Enzyme 的常规测试示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- ------------
------------------ -- -- -
---------- ------ - ------ ---- ------- ------ -- -- -
----- ------- - --------------------- -------------
----------------------------------------------
------------------------------------------------- -----
---
---------- ------ --- ------- -------- ---- --- ------ -- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------------- -------------
-----------------------------------------
---------------------------------------
---
---在第一个测试用例中，我们通过 shallow 函数创建一个 button 属性值为 Click me 的 Button 组件包裹器。然后，我们使用 Enzyme 的 find 函数查找名称为 button 的元素，并使用 toBe 匹配器验证是否存在一个这样的元素。最后，我们使用 text 函数将 button 的文本内容与 Click me 进行比较。
在第二个测试用例中，我们使用 Jest 提供的 jest.fn 函数创建一个模拟的 onClick 回调函数。然后，我们使用 Button 组件和模拟的 onClick 回调函数创建一个包裹器，并模拟单击 button 元素。最后，我们使用 toHaveBeenCalled 匹配器验证 onClick 回调函数是否被调用。
结论
Jest 和 Enzyme 是非常强大的工具，可用于为 React 组件编写高效测试。通过合理的组合使用，我们可以轻松地写出可读性高，维护成本低的测试用例，同时能够保证为的 React 组件代码质量。学会使用 Jest 和 Enzyme，可以帮助你产生更好的代码思维和编写更好的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ffef5c485b53fc16b6f8b0