在前端开发中，我们常常需要进行单元测试来确保代码的可靠性和稳定性，而 React Redux 的单元测试则是前端开发中的一个重要环节。在进行 React Redux 单元测试时，我们经常会用到 Enzyme 这个工具库。Enzyme 可以帮助我们对 React 组件进行快速、直观、可维护的交互测试和渲染测试，而本文就将介绍如何使用 Enzyme 对有状态的 React 组件进行单元测试。
1. 什么是有状态组件？
在 React 中，组件可以分为有状态组件（Stateful Component）和无状态组件（Stateless Component）。有状态组件指的是被设计为能够存储和管理自己的状态的组件，通常被用来处理用户交互行为或者处理数据等业务逻辑。无状态组件则是一种纯展示组件，只负责数据的展示，没有自己的状态信息。
一个典型的有状态组件模板如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
-- -------
--
-
-- --------
------------------- -
---------------
-
-- ------
------------ - -- -- -
------
--
-- ----
-------- -
------ -
-----
-- -------
------
--
-
-
------ ------- ------------2. Enzyme 的基本介绍与使用
Enzyme 是 Airbnb 开源的一个 React 组件测试工具库，它可以模拟 React 组件在测试环境下的渲染结果，从而让我们可以在测试用例中对这些渲染结果进行详细分析和验证。
2.1 安装
- 使用 npm 安装：
npm install --save-dev enzyme enzyme-adapter-react-16
- 使用 yarn 安装
yarn add enzyme enzyme-adapter-react-16 --dev
其中，enzyme-adapter-react-16 这个库是 Enzyme 使用 React16+ 版本所必须的适配器。
2.2 Enzyme 基本 API
Enzyme 提供了三个基本 API 来进行渲染测试：
shallow()：渲染出当前组件的浅层次（Shallow）渲染结果，即只渲染当前组件下的一层子组件，对于子组件中的深层次的组件不会进行真正的渲染。mount()：在浏览器中进行全渲染，可以测试组件的子组件的交互行为，并能够模拟 DOM 事件。render()：用于将虚拟 DOM 渲染成实际的 DOM 字符串，常用于在测试中生成快照。
例如，我们要对以下的一个组件进行测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------------ -
------ -
-----
----------------------
----------------------
------
--
-我们可以写出以下的测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ------ ------ - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
------------ ----- - --------- -- -- -
----- ------- - -------------------- ------------ ------------------
--------------------------------------------------
-------------------------------------------------
---
---这里，shallow() 函数将 MyComponent 组件进行了一个浅渲染后得到浅层次渲染结果，然后我们断言该渲染结果上的子组件中分别存在 tag 为 h1 和 p 标签，并且 h1 标签中的字体内容为“测试标题”，p标签的内容为“测试内容”。
3. Enzyme 如何测试有状态组件
3.1 测试有状态组件的数据
首先，我们需要知道一个有状态组件所包含的数据有哪些。在构建一个有状态组件时，我们通常会依靠组件的内部状态来管理和渲染组件的数据。这些数据可以通过如下的模型进行组件状态管理：
this.setState({
someStateVar1: //一些数据
someStateVar2: //一些数据
});另外，有时我们还会依靠 Redux 这类工具来管理组件的状态。但无论是哪种方式，组件的状态信息都直接影响到组件的展示结果，因此在测试过程中需要尤其关注组件状态的变化。
下面我们通过一个简单的例子来演示如何测试有状态组件的数据——
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------ --
--
-
--------- - -- -- -
---------------
------ ---------------- - --
---
--
--------- - -- -- -
---------------
------ ---------------- - --
---
--
-------- -
----- - ----- - - -----------
------ -
-----
--------------------
--------------
------- -------------- -------------------------
---------
---------
------- -------------- -------------------------
---------
---------
------
--
-
-
------ ------- ------------我们通过把 state 设置为一个初始值为 0 的计数器，还添加了两个按钮来控制 count 的增减。那么我们的测试代码该如何写呢？
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ------ ------ - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
--------------- -- -- -
----- ------- - -------------------- ----
------------------------------------------
----------------------------------------------
---
----------------- -- -- -
----- ------- - -------------------- ----
------------------------------------------
---------------------------------------------
------------------------------------------
---------------------------------------------
------------------------------------------
---
---这里我们通过 state() 方法获取到组件状态的值，然后进行断言验证。另外，我们还使用了 Enzyme 的 simulate() 方法来模拟按钮的点击行为，从而验证 count 的变化。在这个例子中，对状态的验证是比较简单的。但如果是一个更加复杂的组件，我们应该让测试覆盖所有可能的状态情况，同时也要确保测试代码包含一些边界情况。
3.2 测试有状态组件的事件
有状态组件除了包含一些状态信息，还包含一些和状态息息相关的事件响应函数。例如有一个按钮，点击后可以改变组件的状态值，我们需要通过单元测试来保证该事件的逻辑正确性。那么我们又该如何通过 Enzyme 来模拟事件呢？
相信大家已经聪明的发现在上面的例子中已经给出了模拟 Enzyme 事件的示例，那就是 simulate() 方法。这个方法可以模拟各种 DOM 事件，包括 click、change、submit 等等。我们可以通过该方法来模拟事件，并验证其逻辑正确性。例如：
it('点击按钮出发事件', () => {
const wrapper = shallow(<MyComponent />);
wrapper.find('button').simulate('click');
expect(wrapper.state('count')).toEqual(1);
});上述测试函数很好地演示了如何使用 Enzyme 来测试有状态组件中的事件响应函数。
4. 总结
本文介绍了如何使用 Enzyme 来测试有状态的 React 组件，并详细说明了 Enzyme 的基本 API 和 React 组件的渲染结构等内容。通过上面的例子，读者可以了解到如何通过 Enzyme 的帮助，对组件数据、事件等进行单元测试，从而保证 React Redux 开发的代码稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec2ad8f6b2d6eab36713ab