如何在 Enzyme 中测试 React 中使用 Redux 的组件?

React 和 Redux 是现代前端开发中常用的两个技术,它们可以极大地提高开发效率和应用程序的可维护性。但是同时使用它们构建的组件的测试也是不可避免的,因为在代码随着开发的进行不断变化的情况下,保证组件的正确性是至关重要的。本文将介绍如何在 Enzyme 中测试 React 中使用 Redux 的组件。

Enzyme 简介

Enzyme 是 Airbnb 开源的用于测试 React 组件的 JavaScript 工具库。它提供了很多 API,可用于方便地创建和操作 React 组件,以简单而直观的方式编写测试。

测试 Redux 应用程序的组件

Redux 是一个预测性的状态管理库,它使开发人员能够更加可靠地维护应用程序状态。在测试 Redux 组件时,需要模拟应用程序状态的变化。

首先,我们需要使用 Enzyme 中的 mount 方法将组件挂载到 DOM 上,然后创建一个 Redux store 对象,并将它作为 prop 传递给组件。

------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----- - ---- ---------
------ -------------- ---- -------------------
------ ----------- ---- ----------------

----------------------- -- -- -
  ----- --------- - -------------------
  --- ------

  ------------- -- -
    ----- - -----------
      -- ------
    ---
  ---

  ---------- ------ ----------- -- -- -
    ----- ------- - ------
      --------- --------------
        ------------ --
      ------------
    --
    ----------------------------------
  ---
---

然后可以使用 Enzyme 的 simulate 方法模拟组件中传入的事件,以测试组件中 Redux action 和 reducer 的正确性。

---------- -------- -- ------ -- ------ ------- -- -- -
  ----- ------- - ------
    --------- --------------
      ------------ --
    ------------
  --
  ----- ------ - ---------------------------
  -------------------------
  ----- ------- - -------------------
  -------------------------- ----- ------------- ----
---

上述测试将在按钮点击时检查是否触发了一个名为 SOME_ACTION 的 Redux action。

测试 Redux 内部的组件

在测试 Redux 内部的组件时,需要 Mock React 组件的 connect 方法来使其脱离 Redux store,这样可以更方便地编写测试代码。

下面演示了如何使用 react-redux 提供的 mockStore 方法模拟 Redux store。

------ ----- ---- --------
------ - ----- - ---- ---------
------ -------------- ---- -------------------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------

----------------------- -- -- -
  ----- --------- - -------------------
  --- ------

  ------------- -- -
    ----- - -----------
      -- ------
    ---
  ---

  ---------- ------ ----------- -- -- -
    ----- ------- - ------
      --------- --------------
        ------------ --
      ------------
    --
    ----------------------------------
  ---

  ---------- ------ ------ ----- ----------- -- -- -
    ----- ----- - -
      --------- ----------
    --
    ----- ------- - ------------------ ---------- ----
    ----- ------ - ---------------------------
    -------------------------
    ---------------------------------------------
      ----- --------------
    ---
  ---
---

使用这种方法,我们可以更容易地测试 Redux 组件,并分离 Redux store 中的组件逻辑,以便更好地进行单元测试。

结论

本文介绍了如何使用 Enzyme 的 API 测试 React 中使用 Redux 的组件,包括如何在组件中模拟 Redux store 和在 Enzyme 中 Mock React 组件的 connect 方法。

如何在 Enzyme 中测试 React 中使用 Redux 的组件?我们已经告诉你,希望本文可以帮助你更好地理解如何测试 React 中的 Redux 应用程序组件。在实践中,我们还需要适当地选择测试和 Mock Redux 应用程序中的各个部分。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671f52da2e7021665efd0279