介绍
在前端开发中，进行单元测试可以有效地提升代码的可靠性、可维护性，并降低代码出错的概率。React 是一套非常受欢迎的前端开发框架，而 Jest 和 Enzyme 是两个常用的 React 单元测试工具。在本文中，我们将会详细的介绍 Jest 和 Enzyme 这两个工具，并且通过实例代码进行演示。
Jest
什么是 Jest
Jest 是 Facebook 推出的一个开源的 JavaScript 单元测试框架。Jest 可以帮助我们对代码进行测试，并且提供了完整的测试环境和丰富的 API 接口，拥有简单易用、速度快、丰富的功能特性等优点。
安装 Jest
我们可以通过 npm 全局安装 jest：
npm install -g jest
也可以通过项目内安装：
npm install jest --save-dev
Jest 配置文件
我们可以通过 package.json 文件中的 jest 属性来配置 Jest：
-- -------------------- ---- -------
-
------- -
----------------------- -
-----
-----
--
-------------------- -
---------------
-----
--
------------------- -
--------------------------- -----------------------------------
------------------------ ---------------------------------
--
------------ -
------------------ ------------
--
--------------------- -
-----------------------------
-
-
-这里我们对一些常用的配置进行了说明：
- moduleFileExtensions：测试文件支持的文件扩展名。
- moduleDirectories：测试文件搜索的目录，这里我们指定了 node_modules 和 src 目录。
- moduleNameMapper：用于指明一些需要 mock 的文件。
- transform：将测试文件转化成 Jest 可以识别的格式。
- setupFilesAfterEnv：在每个测试文件运行之前，执行的文件。
Jest 测试脚本
下面是一个简单的 Jest 测试脚本：
-- -------------------- ---- -------
---------------- -- -- -
------- - - - --- -- -- -
-------- - -----------
---
------- - - - --- -- -- -
-------- - -----------
---
---我们可以使用 describe 函数来定义一组测试，使用 test 函数来定义一个测试用例。在这个例子中，我们测试了两个加法的算式是否正确。
Jest 常用断言
Jest 提供了各种各样的断言方法，这里我们列出了一些常用的断言方法：
- toBe(expected)：判断实际值是否等于期望值。
- toEqual(expected)：判断实际值与期望值是否相等。
- toBeNull()：判断实际值是否为 null。
- toBeUndefined()：判断实际值是否为 undefined。
- toBeDefined()：判断实际值是否已定义。
- toBeTruthy()：判断实际值是否为 true。
- toBeFalsy()：判断实际值是否为 false。
- toContain(expected)：判断实际值中是否包含期望值。
- toMatch(regexp)：判断实际值是否匹配正则表达式。
- toThrow(error)：判断实际值是否抛出指定的错误。
Enzyme
什么是 Enzyme
Enzyme 是由 Airbnb 提供的一个 React 组件测试工具。它提供了一套简单的 API 来操作 React 组件，并且支持多种渲染方式以及完善的断言机制，可以让我们方便地对 React 组件进行测试。
安装 Enzyme
我们可以通过 npm 安装 Enzyme：
npm install enzyme --save-dev
需要注意的是，在使用 Enzyme 之前，还需要安装相应的 Adapter：
npm install enzyme-adapter-react-16 --save-dev
Enzyme 配置
我们需要在测试文件中引入 Enzyme，并对其进行一些基本的配置：
import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这里我们引入了三个渲染组件的函数：shallow、mount 和 render。需要注意的是，在使用之前也需要引入 React 库。
Enzyme 测试脚本
下面是一个使用 Enzyme 测试 React 组件的例子：
describe('组件测试', () => {
it('应显示 "Hello, world!"', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('div').text()).toBe('Hello, world!');
});
});这里我们对一个名为 MyComponent 的 React 组件进行了测试。我们使用 shallow 函数来渲染 MyComponent 组件，并在期望的结果中查找到了 “Hello, world！” 文字。
Enzyme 常用方法
Enzyme 提供了各种各样的方法来测试 React 组件，这里我们列出一些常用的方法：
- shallow(node[, options])：渲染组件，并返回浅层包装器。
- mount(node[, options])：渲染组件，并返回完整包装器，返回结果为一个 React 组件。
- render(node[, options])：渲染组件，并返回纯 HTML，返回结果为字符串。
- exists(selector)：判断包装器中是否存在指定的 DOM 节点或者组件。
- find(selector)：根据选择器查找包装器中的节点。
- prop(key)：返回 props 中指定 key 的值。
- state([stateKey])：返回组件状态。
- simulate(event[, eventData])：模拟指定的事件，常用于测试用户交互行为。
示例代码
下面是一个使用 Jest 和 Enzyme 进行测试的示例代码：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ------ -- -- -
-------- ------ ---- -- -- -
----- ------- - --------------- ----
----------------------------------------------------
---
-------------- -- -- -
----- ------- - --------------- ----
--------------------------------------------------------- -------
---
-------------- -- -- -
----- ------- - --------------- ----
---------------------------------------------------------
---
--------------- -- -- -
----- ------- - --------------- ----
---------------------------------------------------------
---
----- -------------------- ---- -------
-- ---------
------ ----- ---- --------
------ ---------------
-------- -------- -
------ -
------- -------------------
--- ------------------------------- ---------
---- ------------------------
----
--- ------------------------------------
--- ------------------------------------
--- ------------------------------------
-----
------
---------
--
-
------ ------- --------- -------------------- ---- ------- -- ---------- -- ------- - -------- ----- ---------------- -------------- ------------ ------- -------- ------- ----------------- ----- - -------------- - ------- -- - ------------ - ------- -- -------- -- ----------- ----- -------- ----- - ----------------- - ------------- ----- -
在这个例子中，我们测试了一个 Header 组件，用于显示一个博客网站的标题和导航菜单。我们使用了 Jest 和 Enzyme 两个工具，分别对组件的渲染、文字内容以及导航菜单等进行了测试。
结语
Jest 和 Enzyme 是两个非常好用的 React 单元测试工具，能够帮助我们有效地提升代码质量。希望本文对大家学习 Jest 和 Enzyme 有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67806596ce7f48612539b129