Enzyme 是一个 React 组件测试工具，它提供了一组用于模拟组件行为和 DOM 操作的 API，使得开发者可以更加方便地测试 React 组件。在 Redux 中，通常会使用 React-Redux 来连接组件和 Redux store，因此 Enzyme 也可以用于测试 Redux 相关的组件。
在本文中，我们将分享如何使用 Enzyme 来测试 Redux 相关的组件，以及如何处理异步操作和复杂的组件结构。
安装和使用 Enzyme
安装 Enzyme 及其适配器非常简单，只需要执行以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
然后在测试文件中引入和配置 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这样就可以开始编写测试了。
测试 Redux
首先，我们来看一个简单的 Redux 组件的测试例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- ------- --------------- -
--------- - -- -- -
--------------------- ----- ----------- ---
--
--------- - -- -- -
--------------------- ----- ----------- ---
--
-------- -
------ -
-----
--------- ----------------------
------- -----------------------------------
------- -----------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ ------------
---
------ ------- ----------------------------------这是一个计数器组件，在用户点击加减按钮时会分别 dispatch INCREMENT 和 DECREMENT 两个 action，从而更新 Redux store 中的状态。接下来我们编写测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - --------------- - ---- -------------------
------ ------- ---- ------------
------------------- -- -- -
-------------- --- ---------- --- ------- -- -- -
----- ----- - ----------------- ------ - ---
----- ------- - -------------- ------------- ----
----- ----- - -------------------------
----------------------------- ----
-----------------------------------------------
------------------------------------- ----- ----------- ----
-----------------------------------------------
------------------------------------- ----- ----------- -- - ----- ----------- ----
------------------------------------------------ ----
---
---我们首先创建了一个 mock store，然后使用 Enzyme 的 mount 方法来渲染 Counter 组件。mount 方法模拟了组件的完整生命周期，因此它会执行组件的 componentDidMount 方法，并将 store 中的状态传递给组件。
接下来我们通过 find 方法找到组件中的 p 元素，并检查它的文本内容是否为 'Count: 0'。然后我们分别模拟用户点击加减按钮，并分别检查 store 中的 action 是否正确。最后，我们再次检查 p 元素的文本内容是否为 'Count: 0'。
这样，我们就完成了针对 Redux 组件的简单测试。下面我们将会讨论一些更加复杂的测试场景。
处理异步操作
在实际开发中，我们经常需要处理异步操作。例如，当用户点击一个按钮时，应用程序需要发起异步请求，然后根据响应来更新状态。这时，我们需要编写异步测试代码。
让我们看一个例子。假设我们有一个异步操作，它会从服务器获取一些数据，然后将数据保存到 Redux store 中。我们可以使用 redux-mock-store 中间件来模拟异步操作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - --------------- - ---- -------------------
------ ----- ---- --------------
------ --------- ---- -------------
------ ------- ---- ------------
----- ----------- - --------
----- --------- - -----------------------------
------------------- -- -- -
------------ -- -
------------------
--------------------
---
----------- ---- --- ------- --- ------- -- -- -
----- ---- - - ------ -- --
------------------------------- - ----- ---- ---
----- ----- - ----------- ------ - ---
----- ------- - -------------- ------------- ----
----- ----- - -------------------------
----------------------------- ----
------ -----------------------------------
-------- -- -
------------------------------------- ----- --------------------- -- - ----- ---------------------- -------- ---- ----
------------------------------------------------ -----
---
---
---在这个例子中，我们使用了 fetch-mock 来模拟服务器响应。我们创建了一个 mock store，然后使用 mount 方法渲染 Counter 组件，正如前面的例子一样。我们获取了组件中的 p 元素，并检查它的文本内容是否为 'Count: 0'。
然后，我们使用 store.dispatch 方法来发起一个异步操作。因为我们使用了 thunk 中间件，这个操作返回的是一个函数，而不是 action 对象。函数会在异步操作完成后触发 dispatch 方法，从而更新 Redux store 中的状态。
我们使用了 return 语句来将测试代码封装在一个 Promise 对象中。这样，Jest 就可以等待异步操作完成后再执行后续代码。在 Promise 回调函数中，我们能够访问 store 中的 action 对象，并检查其是否正确。最后，我们检查 p 元素的文本内容是否正确。
处理复杂的组件结构
在实际开发中，我们经常会编写复杂的组件。这些组件可能包含嵌套的子组件、条件渲染、事件处理等复杂结构。在这种情况下，我们需要编写更加细粒度的测试用例，以覆盖所有可能的路径。
让我们看一个例子。假设我们有一个带有条件渲染的 Form 组件，根据用户的输入显示不同的提示信息。我们可以使用 Enzyme 的 find 方法和 simulate 方法来模拟用户的输入，从而测试不同的路径。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ---- ---- ---------
---------------- -- -- -
------------ --- ------- ------- ---- --- ---- -- --------- -------------- -- -- -
----- ------- - ----------- ----
---------------------------------------- - ------- - ------ ---------- - ---
----------------------------------------
------------------------------------------------------------
---
------------ --- ----- ------- ---- --- ---- -- --------- ---------------- -- -- -
----- ------- - ----------- ----
---------------------------------------- - ------- - ------ -- - ---
----------------------------------------
----------------------------------------------------- ----- - ----- ------------
---
---在这个例子中，我们定义了两个测试用例。每个测试用例都使用 mount 方法来渲染 Form 组件。然后，我们使用 simulate 方法来模拟用户的输入，并检查渲染结果是否正确。第一个用例检查成功提示消息，第二个用例检查错误提示消息。
注意，我们使用了 Jest 的 describe 和 it 方法来分别定义测试套件和测试用例。这是一种良好的测试编写风格，能够使测试代码更具可读性和可维护性。
结论
Enzyme 是一个非常有用的测试工具，它可以帮助我们更加方便地测试 React 和 Redux 相关的组件。在本文中，我们学习了如何安装和使用 Enzyme，并介绍了一些常见的测试场景，包括处理异步操作和复杂的组件结构。希望这篇文章能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771f2fd6d66e0f9aad31b8b