在 React 应用中，Redux 已经成为了管理状态的主流解决方案。为了保证代码的可靠性，我们需要对 Redux 中的 state 进行测试。在本文中，我们将介绍如何使用 Enzyme 来测试 React 组件中的 Redux 的 state，包括如何设置 store、获取和修改 state，以及如何模拟 Redux 的 action。
什么是 Enzyme？
Enzyme 是一个由 Airbnb 开发的 React 组件测试库，它提供了一套简单且易用的 API，用于测试组件的输出、渲染和交互等方面。Enzyme 将 React 组件封装在浅层渲染器（shallow renderer）中，从而使测试变得简单高效。
设置 Redux 的 store
在使用 Enzyme 测试 React 组件中的 Redux 的 state 之前，我们需要先创建一个 Redux 的 store。可以采用 createStore 函数创建一个空的 store，或者使用 Redux 的应用程序状态初始值（initialState）创建 store。在测试文件中，我们可以在 beforeEach 块中创建 store，并将其传递给组件作为属性。以下是一个例子：
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ------- ---- -------------
--- ------
------------- -- -
----- - -------------------- ------- ----
---
----------------- ----------- -- -- -
----------- ------- ---------- -- -- -
----- --------- - ----------------- ---------------------- ---------------
-----------------------------------------
---
-- ---
---在上面的代码中，我们创建了一个名为 store 的 Redux store，并将其传递给 Counter 组件作为属性。请注意，在创建 store 和渲染组件之前，我们需要在测试用例中包装组件，使用 Provider 包裹组件，并将 store 作为 store 属性的值传递给 Provider 组件。
获取和修改 state
我们可以通过 store 的 getState() 方法来获取当前的 Redux state。在组件的测试中，我们需要获取、修改，甚至模拟 Redux state，以模拟 interaction。以下是一个 Counter 组件的测试用例：
----------------- ----------- -- -- -
----------- ------- ---------- -- -- -
----- --------- - ----------------- ---------------------- ---------------
-----------------------------------------
---
-------------- --- --------- -- -- -
----- --------- - ----------------- ---------------------- ---------------
----- ------------ - -----------------------
------------------------------------------------------
--------------------------------------------------- - ---
---
-------------- --- --------- -- -- -
----- --------- - ----------------- ---------------------- ---------------
----- ------------ - -----------------------
------------------------------------------------------
--------------------------------------------------- - ---
---
---在上面的代码中，我们模拟了两种场景：counter 增加和 counter 减少。我们首先获取使用 store 的 getState() 方法获取当前的 count 值，然后模拟用户点击 increment 或 decrement 按钮，并使用 expect() 方法来测试是否按预期增加或减少了 count 值。
模拟 Redux 的 action
我们还可以使用 Enzyme 来模拟 Redux 的 action，并测试 state 是否按照预期修改。React-Redux 库提供了 shallowWithStore 函数来测试 Redux 中的 action。以下是一个例子：
----- ----- - -
------ --
---------- ----------
--
----------------- ----------- -- -- -
----------- ------- ---------- -- -- -
----- ------- - ---------------- ---------- ----
---------------------------------------
---
--------- --------- -------- ---- ------ -- --------- -- -- -
----- ------- - ------------------------- ---------- --- -------
----------------------------------------------------
------------------------------------------------
---
---在上面的代码中，我们创建了一个带有 increment 函数的 props 对象，并将其作为 Counter 组件的属性传递。然后，我们使用 shallowWithStore 包装 Counter 组件，并模拟用户点击 increment 按钮，验证 increment() 函数是否被调用，以及调用时是否按照预期增加了 count 值。
总结
在本文中，我们介绍了如何使用 Enzyme 来测试 React 组件中的 Redux 的 state，包括如何设置 store、获取和修改 state，以及如何模拟 Redux 的 action。在编写测试代码时，请注意保持测试的简洁性和高效性，并遵循最佳实践，以获得更好的测试覆盖率和可靠性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b7719aadd4f0e0fffffff6