Redux 是一个非常流行的状态管理库，它可以帮助我们处理复杂的应用程序数据和状态。而异步操作在现代的前端开发中也极为常见，因此为 Redux 中的异步 action 编写有效的测试非常重要。在本文中，我们将介绍如何使用 Jest 测试 Redux 中的异步 action。
异步 action 基础知识
异步 action 是指 Redux 中的 action 可以异步执行，我们经常需要异步加载数据或者执行其他异步操作。但是，基本的 Redux action 可以确保应用的状态发生变化，但是却无法捕捉异步的回调函数中产生的错误。这就是为什么我们需要使用异步的 action。
异步的 action 通常会涉及到一种特殊的 action 类型，通常被称为 action creators。常见的 action creators，会返回一个函数，该函数会接收 dispatch 和 getState 作为参数，dispatch 是用来发出 action 的函数，getState 用来访问 Redux store 的状态。
-------- ------------ -
------ ------------------ --------- -
---------- ----- ------------------- ---
------ -----------------------
-------------- -- -
---------- ----- ---------------------- -------- ------------- ---
--
------------ -- -
---------- ----- ---------------------- -------- ----- ---
---
--
-在上面的例子中，我们定义了一个名为 fetchUsers 的 action creators，它将一个函数作为返回值。当它被调用时，该函数将返回另一个函数，该函数将接收 dispatch 和 getState 两个参数。
接下来，在该函数的内部，我们首先发出一个 FETCH_USERS_START 的 action，以通知 Redux 我们要开始加载数据。然后，我们使用 Axios 进行异步请求，当请求成功时，我们会发出 FETCH_USERS_SUCCESS 的 action，该 action 负责更新状态。如果请求失败，则会发出 FETCH_USERS_FAILURE 的 action。
Jest 基础知识
Jest 是 Facebook 开发的一个流行的前端测试框架，它提供了一系列工具和方法用来测试 JavaScript 代码和 React 组件。Jest 是一个非常强大和易用的工具，让我们可以轻松地编写测试用例，并对应用程序进行全面测试。
在本文中，我们将使用 Jest 来测试 Redux 中的异步 action。
编写测试
在开始编写测试之前，我们需要确保代码能够正确地运行。以下是我们需要安装的依赖项：
--- ------- ----- ----------- ---- ---------------- ----------
在编写测试之前，我们需要创建一个 stub store，以模拟 Redux store 的功能。我们可以使用 redux-mock-store 包来创建我们的 stub store。
------ ------------------ ---- ------------------- ------ ----- ---- -------------- ----- ----------- - -------- ----- --------- - --------------------------------
我们还需要编写测试用例，以确保 fetchUsers action creator 可以正确地处理异步操作。对于这个测试，我们将使用 Jest 中的 mock 函数和模拟的 Axios 来模拟网络请求。
------ ----- ---- --------
------ - ---------- - ---- ----------
-------------------
--------------- --------- -- -- -
----------- ------------------- ---- -------- ----- --- ---- ------ -- -- -
----- ----- - -- --- -- ----- ----- ------ ---
----------------------------- ----- ----- ---
----- --------------- - -
- ----- ------------------- --
- ----- ---------------------- -------- ----- -
--
----- ----- - ----------- ------ -- ---
------ ------------------------------------ -- -
----------------------------------------------------
---
---
---在这个测试用例中，我们首先使用 jest.mock 函数来模拟 Axios。
接下来，我们创建了一个名为 users 的数组，并使用 mockResolvedValue 函数将其设置为 Axios 的响应数据。
我们定义了一个名为 expectedActions 的数组，用来存储我们期望得到的 action。
然后，我们使用 redux-mock-store 包中的 mockStore 函数来创建一个 store，其状态被设置为一个空的 users 数组。
最后，我们通过调用 store.dispatch(fetchUsers()) 来在 store 中执行异步操作。当 promise 被 resolved 时，我们检查 store 中的 action 数组是否与我们的期望值相等。
结论
在本文中，我们学习了如何使用 Jest 和 redux-mock-store 来测试 Redux 中的异步 action。我们还使用 Axios 和 mock 函数模拟了网络请求，以确保我们的测试用例可以为我们的应用程序提供完整的覆盖。
如果你正在开发 Redux 应用程序，并希望编写有效的测试用例，那么本文将为你提供所需的指导。注意，测试将使你的应用程序更加稳定和健壮，以及更加易于调试和维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f50182e7021665efcf3b1