使用 Enzyme 和 Jest 快速测试 React 应用程序
前端开发者在开发 React 应用程序时，如何保证代码的质量和功能的可靠性是一个必须要面对的难题。一个好的测试工具可以有效地解决这个问题。这篇文章将介绍如何使用 Enzyme 和 Jest 这两个流行的 React 测试工具，帮助我们快速地实现 React 应用程序的测试。
Enzyme
Enzyme 是一个由 Airbnb 开源的 React 测试工具，它可以帮助我们快速和灵活地测试 React 组件。Enzyme 具有以下几个特点：
可以模拟 React 组件的渲染和交互过程，使得测试代码尽可能接近真实环境。
提供了多种 API 用于轻松定位和查询组件中的元素，从而方便测试组件的状态和交互。
支持多种测试方式，例如快照测试、单元测试、集成测试等。
安装和配置 Enzyme
要使用 Enzyme 进行测试，我们需要先安装它以及 React 和 Jest。
npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-to-json \ react react-dom jest
然后在 Jest 的配置文件中进行配置：
{
"jest": {
"setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
}
}在 src/setupTests.js 文件中进行 Enzyme 的初始化和配置：
// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import toJson from 'enzyme-to-json';
configure({ adapter: new Adapter() });
expect.addSnapshotSerializer(toJson);这样就完成了 Enzyme 的安装和配置，我们现在可以开始实际测试 React 组件了。
测试组件状态
首先，我们来看看如何测试一个普通的 React 组件的状态。下面是一个简单的计数器组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
-------- ------ -----------
------- ---------------------------------
------
--
-
------ ------- --------我们可以使用 Enzyme 的 shallow 函数来浅渲染 Counter 组件并查询其中的状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------------
------ ------- ---- ------------
----------------- ----------- -- -- -
-------------- --- ------- -- -- -
----- ------- - ---------------- ----
----- ---- - -------------------------
--------------------------- ------ ----
-----------------------------------------
----- ----------- - -------------------------
---------------------------------- ------ ----
------------------------------------------
---
---shallow 函数将 Counter 组件假装成它所包含的 DOM 树的展开结果，并返回一个对象来代表它。我们可以使用 find 方法来查找 Counter 子元素中的元素并查询其文本。simulate 方法可以模拟用户交互，通过触发 click 事件来增加计数器。 最后，我们保存快照以便比较。
测试组件交互
接下来，我们来看看如何测试一个响应用户交互的组件。下面是一个简单的表格组件，可以让用户添加、删除、和编辑数据：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------- -
----- ------ -------- - ----------- ----- -------- ---- -- ----
----- --------- ----------- - ----------------
----- ------------ -------------- - -------------
----- ---------- ------------ - ---------- ----- --- ---- -- ---
-------- ----------- -
----------------- -----------
------------- ----- --- ---- -- ---
-
-------- ------------------- -
----------------------- -- -- - --- --------
-
-------- ----------------- -
-----------------
---------------------
-------------------------
-
-------- -------------- -
----------------------- ------ -- -
-- ------ --- ----------- -
------ ---------
- ---- -
------ -----
-
----
------------- ----- --- ---- -- ---
------------------
------------------
-
------ -
-----
-------
-------
----
-------------
------------
----------------
-----
--------
-------
---------------- ------ -- -
--- ------------
------------ -- ----- --- ---------- -
------ --------------------- ------------- -- ------------- ------------ ----- -------------- --- -- -
---------------
------------ -- ----- --- ---------- -
------ -------------------- ------------- -- ------------- ------------ ---- -------------- --- -- -
--------------
----
--------- -- ------- ----------- -- -------------------------------
--------- -- ------- ----------- -- ---------------------------------
-------- -- ----- --- ---------- --
------- -----------------------------------
-----
-----
---
--------
--------
--- --
-------
-----
------ --------------------- ------------- -- ------------- ------------ ----- -------------- --- --
--------
-------
----
------ -------------------- ------------- -- ------------- ------------ ---- -------------- --- --
--------
------- -------------------------------
------
--
-
------ ------- ------我们可以使用 mount 方法来完全渲染 Table 组件并查询其中的元素。下面是测试代码，我们使用了 describe 和 it 函数来组织测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- -----------------
------ ----- ---- ----------
--------------- ----------- -- -- -
-------- - --- -- --- ----- ---- -------- --- --- -------- -- -- -
----- ------- - ------------ ----
----- ---- - ------
----- --- - ---
---------------------------------------------- - ------- - ------ ---- - ---
---------------------------------------------- - ------- - ------ --- - ---
-----------------------------------------------
----- ----------- - ------------------- ------------
-------------------------------
------------------------------------------
---
----------- - --- ---- --- ----- ---- -------- --- ------ -------- -- -- -
----- ------- - ------------ ----
-----------------------------------------------
----- ----------- - ------------------- ------------
-------------------------------
------------------------------------------
---
--------- - --- ---- -------- --- ---- ------ --- ----- ---- -------- --- ---- -------- -- -- -
----- ------- - ------------ ----
----- ---- - ----------
----- --- - ---
-----------------------------------------------
---------------------------------------------- - ------- - ------ ---- - ---
---------------------------------------------- - ------- - ------ --- - ---
-----------------------------------------------
----- ----------- - ------------------- ------------------
----- ---------- - ------------------- ------------------
----------------------------------
-------------------------------------------
------------------------------------------
---
---我们使用表格中的三个操作（添加、删除和编辑）分别执行了测试用例。我们可以使用 at 方法和索引来定位不同的元素。在编辑测试中，我们先点击编辑按钮来启动编辑模式，然后输入新的名字和年龄，最后点击保存按钮来保存修改。toMatchSnapshot() 方法用于进行快照测试。
Jest
Jest 是 Facebook 开源的一个 JavaScript 测试框架，它能帮助我们对 JavaScript 代码进行单元测试、集成测试和端到端测试等不同层次的测试。Jest 具有以下几个特点：
自带 test runner 和 assertion 库，无需额外安装库。
提供了代码覆盖率检测、快照测试、异步代码测试等丰富的测试工具。
配置简单、易于使用。
安装和配置 Jest
要使用 Jest，我们需要先安装它以及 React 和 Enzyme。
npm install --save-dev jest babel-jest @babel/preset-env \ @babel/preset-react enzyme enzyme-adapter-react-16 enzyme-to-json \ react react-dom
在项目根目录下创建 jest.config.js 文件，进行 Jest 的配置：
-- -------------------- ---- -------
-------------- - -
---------------- --------
----------------------- ------------------ ----------
--------------------- ------ -------
----------------- -
---------------------- ---------------------
------------- -------------------
-------------------- ------------------------------
--------------- -------------------------
--
------------------- --------------------------------
-------------------- ------------------------------
--在 src/setupTests.js 文件中进行 Jest 和 Enzyme 的初始化和配置：
// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import toJson from 'enzyme-to-json';
configure({ adapter: new Adapter() });
expect.addSnapshotSerializer(toJson);Jest 和 Enzyme 都已经配置好了，现在我们可以在项目中编写测试用例。
测试工具和命令
Jest 提供了很多测试工具和命令，这里介绍其中常见的几个：
test ：测试命令，用于运行所有测试用例。
describe 和 it ：用于组织测试用例，describe 可以用来描述一组测试用例，it 可以用来描述单个测试用例。
expect ：用于进行断言。
mock ：用于模拟依赖关系并测试代码行为。
snapshot ：用于对组件快照进行测试。
快照测试
快照测试是 Jest 中比较有用的一个功能，它可以轻松地创建组件快照并在以后的测试中进行比较。通过快照测试，我们可以确保组件在各种情况下都表现正常。
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --------- ---- ---------- -- -- -
----- ---- - ---------------------------- -------------
-------------------------------
---
----------- --------- ---- ------ ------- -- -- -
----- ---- - ---------------------------- ------------ -------- -------------
-------------------------------
---
---这里我们使用了 react-test-renderer 库来快照测试 MyComponent 组件，对比不同组件的快照来确保组件渲染的正确性。toMatchSnapshot 方法用于比较快照。
结论
使用 Enzyme 和 Jest 可以快速、易用地测试 React 应用程序。Enzyme 在测试组件时提供了多种 API，当然 Jest 自带的一些测试工具也非常好用。本文介绍了其中的基础用法和工具，但是基础知识只是开始，后续需要更多的实践和探索才能更好的掌握这两个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670100520bef792019b0166a