前端开发中，组件化开发已经成为了一种非常普遍的开发方式。而为了保证组件的质量和可靠性，我们需要进行单元测试。在 React 中，采用 jest 和 enzyme 进行单元测试可以非常方便地进行各种测试。
前置知识
在开始使用 jest 和 enzyme 进行单元测试之前，我们需要了解一些相关的知识：
- Jest：Jest 是 Facebook 出品的一个 JavaScript 的测试框架，它能够帮助我们简化测试的编写和管理。
- Enzyme：Enzyme 是 Airbnb 出品的一个 React 组件的测试工具包，它能够让我们方便地操作组件，模拟用户行为，进行各种测试。
- 断言库：Jest 默认提供了很多常用的断言库（如 toBe、toContain、toEqual 等），用于判断测试结果是否符合预期。
如果你还不了解这些内容，建议先去学习一下。
安装与配置
在进行单元测试之前，我们需要先安装和配置一些相关的工具。下面是具体的步骤：
- 安装 Jest 和 Enzyme：
npm install --save-dev jest enzyme enzyme-adapter-react-16
- 配置 Jest：
在项目根目录下创建一个 jest.config.js 文件，并加入以下内容：
module.exports = {
"testEnvironment": "jsdom",
"setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"],
"moduleFileExtensions": ["js", "jsx"],
"moduleNameMapper": {
"\\.(css|scss)$": "identity-obj-proxy"
}
}其中：
testEnvironment指定了 Jest 测试的环境。我们使用jsdom作为测试环境，因为它提供了一个类似于浏览器的 API 环境，能够帮助我们进行各种测试。setupFilesAfterEnv指定了 Jest 运行测试代码前需要运行的脚本。在这里，我们需要在/src目录下创建一个setupTests.js文件并写入以下内容：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这个脚本的作用是配置 Enzyme 使用的 React 适配器。
moduleFileExtensions指定了 Jest 导入模块的文件扩展名，这里我们加入了jsx。moduleNameMapper指定了模块的映射关系。在我们的组件中，可能会引用一些样式文件，这里我们使用identity-obj-proxy来模拟这些样式文件。
- 配置 Babel：
我们需要使用 Babel 运行测试代码，因为它能够帮助我们转换新的 JavaScript 语法。在项目根目录下创建一个 .babelrc 文件，并加入以下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}其中，@babel/preset-env 是一个智能预设，它能够帮助我们根据当前环境自动选择插件和转换代码。@babel/preset-react 则是用于将 JSX 转换为 JavaScript 的插件。
- 为组件编写测试脚本：
在 /src 目录下创建一个与组件同名的测试文件，例如 MyComponent.test.js。注意，测试文件名必须以 .test.js 结尾。在这个文件中，我们需要编写测试代码来测试组件的各种行为。
编写测试脚本
接下来我们来通过一个例子来展示如何编写 React 组件的测试脚本。
假设我们有一个名为 Button 的 React 组件，它接收一个 onClick 函数作为参数，并在用户点击时调用该函数来处理点击事件。我们的测试目标是测试这个组件是否正确地渲染和处理点击事件。以下是测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ------ ---- -----------
------------------ -------- --- --------- ---
------------------ -- -- -
---------- ------ -------- -- -- -
----- ------- - ------------- ----
---------------------------------------------------
---
---------- ------ ------ -- -- -
----- ------- - ------------------- -------------
---------------------------------- -----
---
---------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - ------------- ----------------- ----
-----------------------------------------
-----------------------------------
---
---上面的测试代码有三个测试用例：
- 第一个测试用例测试组件是否正确地渲染。
- 第二个测试用例测试组件是否能够正确地渲染文本。
- 第三个测试用例测试组件是否能够正确地处理点击事件，并正确地调用传递进来的
onClick函数。
其中，我们使用 Enzyme 中的 mount 方法来挂载被测试的组件，模拟用户操作，断言组件行为是否符合预期。jest.fn() 是 Jest 提供的一个模拟函数，它可以方便地模拟一个函数并跟踪它的调用情况。
通过对这些测试用例的测试，我们能够保证组件的质量和可靠性，进而提高代码的稳定性和可维护性。
小结
本文我们介绍了在 React 中使用 Jest 和 Enzyme 进行组件单元测试的方法，并通过一个例子展示了如何编写测试脚本。单元测试是保证代码质量的一种有效方式，它能够帮助我们在开发过程中及时发现问题并及时修复。学习并掌握单元测试技能对于任何一个开发者来说都是非常有意义的，希望本文能够帮助读者更好地学习和应用单元测试技术。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/677fd1f9ce7f4861251bf61f