如何使用 Enzyme 测试 Redux 中的异步 Action Creator

Redux 是一个非常流行的状态管理库,而 Enzyme 是一种常用的测试工具,用于测试 React 组件。在编写前端应用程序时,需要使用测试工具来测试 Redux 异步 Action Creator 的正确行为。在本文中,我们将深入探讨如何使用 Enzyme 对 Redux 中的异步 Action Creator 进行测试。

准备工作

在开始之前,您需要安装一些依赖项。请在终端中使用以下命令安装它们:

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

在安装完上述依赖项之后,我们需要使用 Enzyme Adapter 来初始化 Enzyme。可以通过在应用程序中的入口点中添加以下代码来完成此操作:

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

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

此代码段将 Enzyme Adapter 初始化为与 React 16 兼容的版本。

接下来,我们需要创建一个 Redux store 的模拟实例。我们可以使用 redux-mock-store 来创建此存储。下面是一个示例代码:

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

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

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

这应该是您的准备工作。

编写测试用例

首先,我们需要编写一个测试用例来测试 Redux 中的异步 Action Creator。在这个例子中,我们将使用 axios 库向远程服务器发送请求。假设您的 Action Creator 如下:

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

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

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

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

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

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

此 Action Creator 将向给定的 URL 发送请求,并在成功或失败时触发相应的 Action。

我们可以编写以下测试用例来测试 Action Creator 是否按预期工作:

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

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

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

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

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

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

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

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

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

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

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

此测试用例会测试 Action Creator 是否正确地分派了 FETCH_DATA_REQUEST 和 FETCH_DATA_SUCCESS 或 FETCH_DATA_FAILURE 行动。此外,我们还使用 axios 的 jest.mock 函数将 axios 库替换为模拟实现,以便我们可以测试此 Action Creator 是否正确地处理异步请求。

结论

在本文中,我们深入探讨了如何使用 Enzyme 测试 Redux 中的异步 Action Creator。我们讨论了准备工作并编写了一个测试用例,使用 redux-mock-store 和 axios 库的模拟实现来测试 Action Creator 是否按预期工作。这让您可以编写强大、高效且可靠的代码来测试 Redux 应用程序的状态管理和异步行为。希望这篇文章对您学习 Redux 和测试 Enzyme 有所帮助。

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