在 React 前端开发中，组件是一个非常重要的概念。随着应用程序的复杂度增加，组件的测试也变得越来越重要。Enzyme 是 React 组件测试中最流行的框架之一，不仅可以测试组件的使用者的交互，也可以测试组件内部状态的变化。本文将介绍如何使用 Enzyme 仅仅测试组件的状态，从而提高测试代码的可读性和可维护性，并简单介绍了 React 生命周期的相关知识。
准备工作
在开始之前，我们需要先安装 Enzyme 和相关依赖，以及 React 的测试工具。可以使用 npm 进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme 是 Enzyme 的核心库，enzyme-adapter-react-16 是 React 16 的适配器，以便应用 Enzyme 。react-test-renderer 用于渲染 React 组件以便测试。
另外，如果是 create-react-app 创建的项目，则需要安装 react-scripts，在 package.json 里找到 "scripts"，将 "test": "react-scripts test" 改为 "test": "react-scripts test --env=jsdom", 这样才能使用 Enzyme 进行测试。
什么是状态？
在一个 React 组件中，状态是组件内部管理的数据。当组件的状态更新时，React 会自动重新渲染组件。这是 React 的核心机制之一。状态是 React 组件的重要行为之一，因此在测试中应予以重视。下面是一个简单的组件，它显示一个计数器，并且可以通过按钮进行增加和减少：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
----- - - ------ - --
--------------- - -- -- -
--------------- ------ ---------------- - - ---
--
--------------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
----- - ----- - - -----------
------ -
-----
------------ ------------
------- -------------------------------------------------
------- -------------------------------------------------
------
--
-
-
------ ------- --------这是一个简单的组件，它有一个名为 count 的状态。我们可以通过 this.setState 方法更新 count 的值，这样组件就会重新渲染。
在测试中，我们希望能够测试这个组件的状态的变化。由于我们没有直接访问状态，因此我们需要使用 Enzyme 进行测试。
使用 Enzyme 进行测试
在本文中，我们将使用 Shallow Rendering 进行组件测试。Shallow Rendering 会渲染组件的一层，并且不会渲染出组件的子组件。
在安装好所需的库之后，我们需要在测试文件中引入 enzyme 和 Adapter 。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
------------------ ---- -- -- -
--------- ------ -- ---- -- --------- -- -- -
----- ------- - ---------------- ----
----- ----- - -----------------------
----------------------
---
---在测试文件中，我们使用了 Enzyme 的 shallow 方法，它接受一个要测试的组件，并返回一个 Enzyme 组件实例。然后我们可以通过 wrapper.state 得到状态值 count，并进行测试。
在这个测试用例中，我们测试了组件的初始状态，检查在没有任何操作的情况下，计数器的值是否为零。
接下来，我们将测试组件的增加和减少按钮的功能。
-- -------------------- ---- -------
------------------ ---- -- -- -
--------- ------ -- ----------- ----------- -- -- -
----- ------- - ---------------- ----
-----------------------------------------------
----- ----- - -----------------------
----------------------
---
--------- ------ -- ----------- ----------- -- -- -
----- ------- - ---------------- ----
-----------------------------------------------
----- ----- - -----------------------
-----------------------
---
---在这个测试用例中，我们先是进行了一个点击操作，然后通过 wrapper.state 获取状态值 count，并进行测试。这里我们使用了 wrapper.find('button').at(0) 选择第一个按钮（第二个按钮就可以使用 at(1)），通过 simulate('click') 方法模拟了一次点击操作。
如果我们的组件需要更多的测试用例，可以添加更多的 it 块并进行测试。
使用 Enzyme 测试生命周期
Enzyme 还可以用于测试 React 组件的生命周期。它可以模拟组件的创建、挂载、更新和卸载。
下面是一个例子：
-- -------------------- ---- -------
------------------ ---- -- -- -
--- --------
------------- -- -
------- - ---------------- ----
---
----------- ----------- -- -- -
----------------------------------
---
---------- ------ --- ----- ----- -- ------ ------- -- -- -
------------------------------------------
-----------------------------------------------
------------------------------------------
---
---------- ------ --- ------- ----------- -- -- -
------- - ---------------- ----
------------------ ------ -- ---
--------------------------------------------------- -----
------------------ ----- ----- -------- ---
---------------------------------------- -----------------------
---
---------- ------- --- ----------- -- -- -
------------------
----------------------------------
---
---这里我们分别测试了组件的渲染、更新、和卸载。在测试渲染时，使用 toMatchSnapshot() 将组件渲染输出到一个快照中，以确保组件在不同环境中的展现一致。在状态操作后，我们使用 setProps() 以模拟在父级组件中的改变。在测试卸载时，我们首先 unmount() 组件并检查 HTML 是否为空。
结论
Enzyme 是 React 测试中的一个非常有用的工具，可以用于测试状态和生命周期，帮助我们快速捕捉到组件变化。本文向我们展示了如何使用 Enzyme 进行测试，具有参考学习和实际指导意义。
完整的测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------
------------------ -------- --- --------- ---
------------------ ---- -- -- -
--------- ------ -- ---- -- --------- -- -- -
----- ------- - ---------------- ----
----- ----- - -----------------------
----------------------
---
--------- ------ -- ----------- ----------- -- -- -
----- ------- - ---------------- ----
-----------------------------------------------
----- ----- - -----------------------
----------------------
---
--------- ------ -- ----------- ----------- -- -- -
----- ------- - ---------------- ----
-----------------------------------------------
----- ----- - -----------------------
-----------------------
---
----------- ----------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---------- ------ --- ----- ----- -- ------ ------- -- -- -
----- ------- - ---------------- ----
------------------------------------------
-----------------------------------------------
------------------------------------------
---
---------- ------ --- ------- ----------- -- -- -
--- ------- - ---------------- ----
------------------ ------ -- ---
--------------------------------------------------- -----
------------------ ----- ----- -------- ---
---------------------------------------- -----------------------
---
---------- ------- --- ----------- -- -- -
--- ------- - ---------------- ----
------------------
----------------------------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748472193696b0268ee6261