使用 Jest 测试 Redux 异步 action 的最佳实践

Redux 是一个流行的 JavaScript 应用程序状态管理库,它提供了一种可预测的状态管理方法。在 Redux 中,action 是一个描述应用程序状态变化的对象。异步 action 是一种特殊类型的 action,它涉及到异步操作,例如从服务器获取数据或将数据发送到服务器。在本文中,我们将介绍如何使用 Jest 测试 Redux 中的异步 action。

安装 Jest

Jest 是一个流行的 JavaScript 测试框架,它可以用于测试 Redux 异步 action。你可以使用以下命令在你的项目中安装 Jest:

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

编写测试用例

在编写测试用例之前,我们需要定义一个异步 action。这里是一个简单的例子:

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

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

上面的代码中,我们定义了一个名为 fetchUser 的异步 action。它接受一个名为 userId 的参数,并返回一个返回函数。在这个返回函数中,我们使用 axios 发送一个 GET 请求,获取用户数据。如果请求成功,我们将分发一个 FETCH_USER_SUCCESS action,如果请求失败,我们将分发一个 FETCH_USER_FAILURE action。

现在,我们可以编写一个测试用例来测试这个异步 action。这里是一个简单的例子:

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

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

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

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

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

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

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

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

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

上面的代码中,我们使用 redux-mock-storeredux-thunk 来创建一个模拟 store,并使用 axios-mock-adapter 来模拟 axios 请求。在测试用例中,我们首先模拟一个成功和一个失败的请求,然后分别测试 FETCH_USER_SUCCESSFETCH_USER_FAILURE action 是否被正确分发。

总结

在本文中,我们介绍了如何使用 Jest 测试 Redux 中的异步 action。我们首先安装了 Jest,并编写了一个异步 action。然后,我们使用 redux-mock-storeredux-thunkaxios-mock-adapter 来编写了两个测试用例。这些测试用例可以帮助我们验证异步 action 是否按预期工作。

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