React 是一个流行的前端框架，用于构建交互式用户界面。在开发过程中，单元测试是确保代码质量和可靠性的重要步骤之一。在本文中，我们将介绍如何使用 Enzyme 和 Jest 进行 React 单元测试，以确保我们的组件行为正确并且不会出现错误。
Enzyme 是什么？
Enzyme 是一个 React 测试实用程序库，它提供了一种简单而强大的方式来测试 React 组件。Enzyme 提供了一组 API，用于模拟 React 组件的渲染行为，以及在测试中对其进行操作和查询。
Enzyme 提供了三种渲染方式：
- 浅渲染（Shallow rendering）：只渲染组件本身，不渲染其子组件。
- 完全渲染（Full rendering）：渲染组件及其所有子组件，可以操作和查询所有子组件。
- 静态渲染（Static rendering）：将组件渲染为静态 HTML 字符串，可以在服务器端进行渲染。
Jest 是什么？
Jest 是一个流行的 JavaScript 测试框架，用于编写和运行 JavaScript 单元测试。它是 Facebook 开发的，专门针对 React 应用程序进行优化。Jest 可以与 Enzyme 配合使用，提供了一个完整的 React 测试解决方案。
Jest 提供了以下功能：
- 自动化测试：Jest 可以自动发现和运行测试，无需手动配置。
- 模拟功能：Jest 提供了一个强大的模拟库，用于模拟函数、对象和模块。
- 覆盖率报告：Jest 可以生成详细的测试覆盖率报告，帮助开发人员了解其代码的覆盖率情况。
如何使用 Enzyme 和 Jest 进行 React 单元测试？
在这里，我们将介绍如何使用 Enzyme 和 Jest 进行 React 单元测试。我们将使用一个简单的 React 组件作为示例，该组件将接受一个数字并将其显示为百分比。
import React from 'react';
const Percentage = ({ value }) => (
<div>{`${value}%`}</div>
);
export default Percentage;为了测试该组件，我们将编写两个测试用例：
- 渲染测试：测试组件是否能够正确渲染。
- 行为测试：测试组件是否具有正确的行为，例如在传递不同的值时是否正确显示百分比。
安装 Enzyme 和 Jest
首先，我们需要安装 Enzyme 和 Jest。在命令行中执行以下命令：
npm install --save-dev enzyme jest enzyme-adapter-react-16
其中，enzyme 是 Enzyme 的主要包，jest 是 Jest 测试框架，enzyme-adapter-react-16 是适用于 React 16 的 Enzyme 适配器。
配置 Jest
在项目的根目录中，创建一个名为 jest.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
------------------- --------------------------------
----------------- -
----------------- -----------------------------------
--
-------------------- --------------------- -----------------
------------------ -
------- -
----------- ---
--------- ---
---------- ---
------ ---
--
--
--这里，我们配置了 Jest 的一些基本设置：
setupFilesAfterEnv：指定一个文件，用于在运行测试之前设置测试环境。在这里，我们将在src/setupTests.js文件中添加 Enzyme 配置。moduleNameMapper：指定模块名称映射，用于将 CSS 和 LESS 文件映射到一个空的模块中。这是因为 Jest 不支持 CSS 和 LESS 文件的导入。collectCoverageFrom：指定应收集测试覆盖率的文件。coverageThreshold：指定全局测试覆盖率阈值。
配置 Enzyme
在项目的 src 目录中，创建一个名为 setupTests.js 的文件，并添加以下内容：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这里，我们配置了 Enzyme，使用适用于 React 16 的 Enzyme 适配器。
编写测试用例
现在，我们可以编写测试用例了。在项目的 src 目录中，创建一个名为 Percentage.test.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---------- ---- ---------------
---------------------- -- -- -
----------- ------- ---------- -- -- -
------------------- ---------- ----
---
------------ --- ------- ------- -- -- -
----- ------- - ------------------- ---------- ----
-----------------------------------
---
---在这里，我们使用 shallow 函数来进行浅渲染，测试组件是否能够正确渲染。然后，我们使用 expect 函数来测试组件是否具有正确的行为，例如在传递不同的值时是否正确显示百分比。
运行测试
现在，我们可以运行测试了。在命令行中执行以下命令：
npm test
Jest 将自动发现和运行测试。如果一切正常，您应该会看到类似以下的输出：
-- -------------------- ---- -------
---- ----------------------
----------
- ------- ------- -------- -----
- -------- --- ------- ----- -----
-----------------------------------------------------------------------
---- - - ----- - - ------ - - ----- - - ----- - --------- ---- --
-----------------------------------------------------------------------
--- ----- - --- - --- - --- - --- -
-----------------------------------------------------------------------这表示我们的测试已通过，并且代码的测试覆盖率为 100%。
结论
在本文中，我们介绍了如何使用 Enzyme 和 Jest 进行 React 单元测试。我们学习了 Enzyme 的基本概念和 API，以及 Jest 的基本设置和功能。我们还编写了一个简单的测试用例，以测试一个简单的 React 组件。通过学习本文，您应该能够开始编写自己的 React 单元测试，并确保您的代码质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67563d143af3f99efe59747e