带有 Redux 的 React 组件测试问题及解决方法

在前端开发中,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