在前端开发过程中，React 是目前非常流行的一个框架。而在编写 React 代码时，单元测试则是保证代码质量的一个非常重要的环节。本文将介绍如何使用 Jest+Enzyme 进行 React 单元测试。
Jest 简介
Jest 是 Facebook 提供的一个 JavaScript 测试框架，它具有以下特点：
- 简单易用
- 速度快
- 支持自动化测试
- 支持异步测试
- 提供测试覆盖率报告
- 支持快照测试
Jest 集成了自带的断言库，无需额外安装，同时也支持第三方断言库（如 chai）。
Enzyme 简介
Enzyme 是 Airbnb 开源的一个 React 测试工具库，它能够方便地用于测试 React 组件的输出。Enzyme 提供了针对 React 组件的 shallow、mount 和 render 三种测试渲染方式。
- shallow：浅渲染组件，只渲染组件本身，不渲染其子组件。
- mount：完全渲染组件及其子组件。
- render：将组件输出为静态 HTML，并根据 HTML 结构返回一个 cheerio 类型的对象。
Jest+Enzyme 实例分析
下面以一个简单的 React 组件 Counter 为例，使用 Jest+Enzyme 进行单元测试。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ -
--
-
--------- - -- -- -
----------------------- -- --
------ --------------- - -
----
--
-------------- - -- -- -
----------------------- -- --
------ --------------- - -
----
--
-------- -
----- - ----- - - -----------
------ -
-----
---------- ------------
------- -------------------------------------
------- -----------------------------------------------
------
--
-
-
------ ------- --------安装 Jest 和 Enzyme
首先，需要安装 Jest 和 Enzyme。运行以下命令：
npm install jest enzyme enzyme-adapter-react-16 --save-dev
其中，
jest：是 Jest 的核心包。enzyme：是 Enzyme 的核心包。enzyme-adapter-react-16：是 Enzyme 适配 React 16 版本的包。
配置 Jest
在 package.json 中增加以下代码配置 Jest，用于测试 React 组件。
-- -------------------- ---- -------
-
------- -
------------------- -
---------------------- -----------------------------------
------------------------ ---------------------------------
--
------------------------------- --------------------------
------------------------- -
-------------------------
--
------------ ---------------------------------------------------
----------------------- -
-----
------
------
--
---------------------- -
---------------------------
--
------------ -
------------------ ------------
-
-
-其中，
moduleNameMapper：处理代码中引入的 CSS 等样式文件。setupTestFrameworkScriptFile：执行测试前的初始化代码。testPathIgnorePatterns：忽略哪些目录下的测试文件。testRegex：配置 Jest 匹配测试文件的正则表达式。moduleFileExtensions：配置 Jest 需要处理的模块扩展名。snapshotSerializers：配置 Jest 序列化程序，序列化组件输出快照。transform：配置 Jest 转换器，用于处理以.js和.jsx结尾的文件。
在 src 目录下，创建 setupTests.js 文件。
import Adapter from 'enzyme-adapter-react-16';
import { configure } from 'enzyme';
configure({ adapter: new Adapter() });在 jest.config.js 文件中增加以下代码，用于快速引入 Jest 提供的断言库。
module.exports = {
globals: {
'expect': 'expect'
}
};编写测试代码
在 src/components 目录下，创建 __tests__ 目录。在该目录下创建 Counter.test.jsx 文件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ ------- ---- -------------
----------------- ---- -- -- -
------ -- ---- -- -- -
----- ------- - ---------------- ----
-------------------------------------------
---
------ ---------- -- -- -
----- ------- - ---------------- ----
------------------------------------------------- ----
---
------------ - --- -- -- -
----- ------- - ---------------- ----
-----------------------------------------------
---
--------- --- -------- -- -- -
----- ------- - -------------- ----
-----------------------------------------------
------------------------------------------------- ----
---
--------- -------- ------ -- -- -- -
----- ------- - -------------- ----
-----------------------------------------------
------------------------------------------------- -----
---
---运行测试
执行以下命令，运行测试代码。
npm run test
如果所有测试通过，则 Jest 将会输出以下信息：
-- -------------------- ---- -------
---- -----------------------------------------
------- --
- -- -- -- -----
- -- -------- -----
- -------- - - -----
- ----- --- ------ ------
- ----- -------- ------ -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- --
--- --- ---- -------总结
本文介绍了如何使用 Jest+Enzyme 进行 React 单元测试，包括了 Jest 和 Enzyme 的简介，以及如何安装、配置和编写测试代码。
单元测试是保证代码质量的极其重要的环节，可以帮助我们规避很多潜在的问题，而 Jest+Enzyme 则是 React 单元测试的一个非常好的选择。希望此篇文章能够帮助大家更好地进行 React 开发和单元测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645af517968c7c53b0d510e1