在前端开发中，React 与 Redux 是非常常用的库。它们分别负责视图层和状态管理，组合使用时可大大提高开发效率。然而，在编写具有 Redux 的 React 组件时，测试所涉及的复杂性也相应增加。在本文中，我们将探讨 Redux 的 React 组件测试所面临的问题及解决方法。
测试问题
在 Redux 的 React 组件中，我们通常通过属性将 Redux 状态和操作注入到组件中。这些属性将作为组件的输入，并影响组件的行为和显示。然而，在测试组件时，我们如何模拟这些属性呢？这是 Redux 的 React 组件测试中需要解决的一项重要问题。
例如，考虑下面的代码片段：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
------ ----- ------- ------- --------------- -
-------- -
----- - ------ --------- - - -----------
------ -
-----
----------------
------- --------------------------------------
------
--
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---------- -- -- ---------------------
---
------ ------- --------
----------------
------------------
-----------在这个例子中，Counter 组件使用 connect 函数将 Redux 状态和操作注入到组件中。在组件中，我们可以通过 this.props.count 和 this.props.increment 访问它们。然而，在测试时如何模拟这些属性呢？
解决方案
要解决这个问题，我们可以使用 react-redux 提供的 Provider 组件和 shallow 函数。Provider 组件是一个组件包装，它将 Redux 存储维护的状态传递给下层组件。shallow 函数是 enzyme 库提供的，它用于渲染一个组件并返回一个浅渲染的实例。浅渲染的实例是没有副作用的，只返回组件的输出。
下面是一个测试 Counter 组件的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------- - ---- ---------
------ ------------------ ---- -------------------
------ ------- ---- ------------
----- --------- - ---------------------
----- ----- - ----------- ------ - --
----- ------- - --------
--------- --------------
-------- --
-----------
--
---------- ------ ------- ------- -- -- -
-----------------------------
---
---------- ------ ----- --- --------- -------- -- -- -
-----------------------------------------------
-----------------------------------------------------------
---
---------- --------- ----- ---- ------ -- --------- -- -- -
-----------------------------------------
----- ------- - -------------------
-------------------------- ----- ----------- ----
---在这个例子中，我们使用 configureMockStore 函数模拟了一个 Redux 存储，将其作为属性传递给 Provider 组件，并使用 shallow 函数渲染了 Counter 组件。然后，我们可以通过 wrapper 对象来访问渲染的组件。在第一个测试用例中，我们检查了 wrapper 是否存在。在第二个测试用例中，我们验证了组件是否正确渲染了 h1 和 button。在第三个测试用例中，我们模拟了一个点击事件，检查 store 是否正确地触发了一个 “INCREMENT” 动作。
结论
在编写 Redux 的 React 组件时，测试将变得更加重要和复杂。我们必须模拟 Redux 存储和组件属性，以便在没有副作用的情况下测试我们的组件。通过使用 react-redux 和 enzyme 库提供的 Provider 和 shallow 函数，我们可以解决这些问题，使测试变得容易且高效。
完整示例代码可在 Github 中下载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672324402e7021665e0e96b7