在前端开发中，使用 React 进行组件编写和 Redux 进行状态管理已经成为了一个非常流行的选择。而在测试各组件的功能时，我们通常使用 Enzyme 来进行组件测试。但是，在测试需要 Redux 状态管理的组件时，我们可能会遇到一些困难。如何模拟 Redux 并在 Enzyme 中使用它呢？本文将向你展示一些详细的方法和示例代码。
可以使用 redux-mock-store 进行模拟
第一种方法，我们可以使用 redux-mock-store 库来模拟 Redux。该库允许我们使用 Redux store 的 API 来模拟 Redux，并且可以用在我们的测试环境中。接下来我们将会通过一个示例来给大家展示如何实现。
首先，安装 redux-mock-store 库：
--- ------- ---------- ----------------
然后，我们可以在测试中通过创建一个 mock store 来代替 store。如下实现：
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ -------------- ---- -------------------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
----- ------------ - -
-- ---- ------ ----
----- ---
----------- ------
--
----- --------- - -----------------
--- --------------
------------- -- -
----- - ------------------------
------- - ------
--------- --------------
------------ --
-----------
--
---
------------ -- -
-----------------
---
---------- ------ ---- ----- ----- ---- ----- ------- -- -- -
---------------------------------------------------
---
---------- -------- -- ------ -- ------ ------- -- -- -
-----------------------------------------
----- ------- - -------------------
----- --------------- - - ----- ---------- --
-------------------------------------------
---
--在上面的示例中，我们首先定义了一个初始化的 redux store initialState，并使用 configureStore 函数来创建 mockStore 对象。我们将 mockStore 包裹在 <Provider> 组件中，然后再将我们的组件包裹在 <MyComponent /> 中。接下来，使用 mount() 方法将将包裹后的组件挂载到 enzyme 中，并绑定到 wrapper 变量上。最后，我们编写了两个测试用例来测试组件是否能够响应按钮点击事件并且获得正确的 reducer 调用结果。
这种方法的优点是灵活性高，可以控制各种测试数据的状态，以及它的缺点是需要手动维护单元测试用例。如果你依赖的 Redux 代码很多，你可能需要写很多单元测试用例来模拟真实 Redux 状态管理。
使用 redux-test-utils 来模拟 Redux
第二种方法，我们可以使用 redux-test-utils 来模拟 Redux。redux-test-utils 是一个可以提供简单和非常灵活的方式来测试 Redux reducer。我们可以使用它来测试 Redux action 的行为以及 reducer 的响应和状态的公共代码。下面我们将介绍具体的实现方法。
首先，安装 redux-test-utils 库：
--- ------- ---------- ----------------
接下来，我们将展示一个示例代码的实现，其中我们将以清晰易读的方式来模拟 Redux：
------ ----- ---- --------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ ------------ ---- ----------------------
------ ----------- ---- -------------------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
--- ------ ---------
----- ------------ - -
-- ---- ------ ----
----- ---
----------- ------
--
------------- -- -
----- - --------------------------------------
-------- - --------------------
--------- --------------
------------ --
-----------
--
---
------------ -- -
-------------------
---
---------- ------------ ------ ---------------- -- -- -
-----------------------------------
---
---------- ------------ ------ -------- -------- -- -- -
----------------
----- -----------
---
----- ----- - -----------------
-------------------------------------
---
--在上例中，我们首先在 beforeEach 中，创建一个名为 store 的 Redux 资料库，并且初始化一个状态 initialState。接着，我们使用 TestRenderer 将包裹后的组件渲染。最后，在 afterEach 中，我们使用 renderer.unmount() 方法释放资源。
测试用例中的第一个测试语句 it('should successfully render <MyComponent/>', ...) 使用到了 Enzyme 的快照功能。这种测试方法可以确保组件渲染后的输出正确，如果我们在未打开JSX支持的情况下使用它会很常见。另一个测试用例 it('should successfully handle ADD_ITEM action', () => {...})，模拟 Reducer 能够响应 ADD_ITEM 的 action。
总体而言，使用 redux-test-utils 可以让我们对 Redux 更加深入和详细的测试。
总结
本篇文章向你介绍了由使用 Enzyme 进行前端组件测试模拟 Redux 的两种方法，分别是使用 redux-mock-store 库和使用 redux-test-utils，并给出了具体的使用示例代码。这些示例中的测试用例可能比较简单，但希望它们能给你启发，实现 Redux 状态测试的方法并不是很困难。
尽管方法有所不同，我们都可以通过这两种方式在 Enzyme 中模拟你的 Redux 状态管理，以便更好地测试你的 Redux 式组件代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664d0494d3423812e4c1c225