在前端开发中，我们经常需要使用 Redux 来管理应用程序的状态。但是，Redux 应用中的异步操作可能会导致测试变得困难。在本文中，我们将介绍如何使用 Jest 测试 Redux 应用中的异步操作。
安装 Jest
首先，我们需要安装 Jest。可以使用以下命令在项目中安装 Jest：
npm install --save-dev jest
编写测试用例
在编写测试用例之前，我们需要先创建一个 Redux store。我们可以使用 redux-mock-store 来创建一个模拟的 store。以下是一个示例 store：
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - -- ------- ---- ------------
----- ----------- - --------
----- --------- - --------------------------------
--------------- --------- -- -- -
----------- ------------------- ---- -------- ----- --- ---- ------ -- -- -
----- --------------- - -
- ----- --------------------------- --
- ----- ---------------------------- ----- - ------ ---- ----------- - -
--
----- ----- - ----------- ------ -- ---
------ -------------------------------------------- -- -
----------------------------------------------------
---
---
---在上面的示例中，我们创建了一个名为 async actions 的测试套件。我们定义了一个名为 creates FETCH_TODOS_SUCCESS when fetching todos has been done 的测试用例。在这个测试用例中，我们创建了一个预期的 action 数组，然后创建了一个模拟的 store。最后，我们使用 store.dispatch() 方法来调用异步操作，并使用 .then() 方法来验证我们的 action 数组是否与预期的 action 数组相同。
在上面的示例中，我们使用了 redux-thunk 中间件来处理异步操作。如果您使用的是其他中间件，请根据需要进行更改。
编写异步操作
接下来，我们需要编写异步操作。以下是一个示例异步操作：
-- -------------------- ---- -------
------ - -------------------- -------------------- ------------------- - ---- ----------------
------ ----- ---------- - -- -- -
------ -------- -- -
---------- ----- ------------------- ---
------ -------------------
-------------- -- ----------------
---------- -- ---------- ----- -------------------- ----- ---- ---
------------ -- ---------- ----- -------------------- ------ ----- ----
--
--在上面的示例中，我们定义了一个名为 fetchTodos 的异步操作。在这个操作中，我们首先调度了一个 FETCH_TODOS_REQUEST action，然后使用 fetch() 方法从服务器获取数据。当数据成功返回时，我们调度了一个 FETCH_TODOS_SUCCESS action，并将返回的数据作为 action 的 body。如果出现错误，我们将调度一个 FETCH_TODOS_FAILURE action，并将错误作为 action 的 error。
运行测试
现在我们可以运行 Jest，以验证我们的测试用例是否通过。我们可以使用以下命令来运行 Jest：
npm test
如果一切正常，Jest 将运行我们的测试用例，并输出测试结果。
结论
在本文中，我们介绍了如何使用 Jest 测试 Redux 应用中的异步操作。我们首先安装了 Jest，然后编写了测试用例和异步操作。最后，我们运行了 Jest，以验证我们的测试用例是否通过。希望本文能够帮助您更好地测试 Redux 应用中的异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760eae903c3aa6a5606d653