在前端开发中使用 Redux 管理应用程序状态已经成为了一种主流的做法。Redux 中的异步 action 是一个非常强大的工具，它使得我们可以与远程服务交互、从服务器获取数据，以及从其他异步调用中获取数据。但是如何测试含有异步行为的代码呢？本篇文章将介绍如何使用 Jest 测试 Redux Store 中的异步 action。
Jest
Jest 是一款 Facebook 开源的 JavaScript 测试运行器，可以用于测试 React、Node.js、TypeScript 等各种前端和后端的应用程序。它的功能非常丰富，可以进行一般的单元测试、集成测试、End-to-End 测试等，还可以进行代码覆盖率测试等。Jest 的速度非常快，因为它可以自动化执行所有测试任务。最重要的是，Jest 的配置非常简单，可以快速运行测试代码。
Redux Store 中的异步 action
在 Redux Store 中，异步 action 是一种特殊的 action，它使用 Redux Thunk 或者 Redux Saga 等中间件来处理异步行为。在 Redux Store 中，有如下代码：
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;在这个代码中，我们使用 Redux Thunk 中间件来处理异步 action。Redux Thunk 中间件允许我们在 action 内部进行异步操作，并且可以使 action 的返回值为一个函数。在这个函数内部，我们可以发出异步请求，并根据请求结果 dispatch 一个新的 action。这使得我们可以使用 Redux Store 来管理应用程序数据。然而，这个异步 action 如何测试呢？
测试异步 action
使用 Jest 框架测试异步 action 需要以下两个步骤：
- 模拟 Store；
- 编写测试套件。
模拟 Store
在测试前，需要先创建一个模拟的 Store 来模拟应用程序。要做到这一点，我们需要编写一个模拟 rootReducer 并模拟 dispatch 方法。以下是模拟 store 代码的示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
----- ------------ - -
------ ---
-------- ------
------ ----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------- -
----- ------- - - ----- -------------------- --- ----------------- --
------ - --------- ------ ---------------- -------- --
-
---- -------------- -
----- ------------- - ----------------------- -- ------- --- -------------------
------ - --------- ------ ------------- --
-
---- ---------------- -
------ - --------- -------- ---- --
-
---- --------------- -
------ - --------- ------ --------------------- -------- ----- --
-
---- ------------------- -
------ - --------- ------ --------------------- -------- ----- --
-
--------
------ ------
-
--
----- ----- - ------------------------ ------------------------
------ ------- ------编写测试套件
现在我们已经有了一个可以测试的 store 对象，那么接下来我们需要编写一些测试用例来测试实际的异步 action。假设我们有一个 INFrastructure API，用于从服务器获取 TODO。我们的异步 action 用于通过 INFrastructure API 获取 TODO 并将其加载到 store 中。以下是关于我们的异步 action 的例子：
-- -------------------- ---- -------
----- ------ - ---------------------------------------------
----- ---------- - -- -- -
------ -------- -- -
---------- ----- --------------- ---
-------------
--------- -- -----------
----------- -- -
---------- ----- --------------- -------- - ----- - ---
--
------------ --
---------- ----- ------------------- -------- - ------ ------------- - --
--
--
--我们期望 Test 在调用异步 action 以便加载其请求时，Store 中的状态应该变为 loading 状态。一旦 API 返回 TODO，Store 应该更新并移除 loading 状态。当后端 API 返回错误时，应触发同步 action 并将错误添加到 Store 中。
我们可以使用 Jest 来测试我们的异步 action：
-- -------------------- ---- -------
------ --------- ---- -------------
------ ----- ---- ----------
---------------------- -- -- -
----- ------------- - -----------------
------------- -- -
--------------------
----------------------------------
---------------- ----- ------- ---
---
---------- ---- ------- ----- -- -- -
----- ----- - -- --- -- ----- ----- -- ---
--------------------- - ----- ------ -------- - --------------- ------------------ - ---
----- -----------------------------
----- ------------ - -------------------------
----- --------- - -----------------------
------------------------------------
---------------------------------------------
---
---------- ------ ------- ----- -- -- -
----- --------- - ------ --------
--------------------- - ------- --- ---------------- ---
----- -----------------------------
----- ------------ - -------------------------
----- ---------- - -----------------------
------------------------------------
--------------------------------------
---
---在这个测试套件中，我们分别测试了当 API 返回 TODO 时，Store 中的状态和测试 API 返回错误时 Store 中的状态。我们使用了 fetchMock，这使得我们可以编写和测试 API 的代码，而无需调用真实的 API。我们还使用 Jest 的异步测试功能，这使得我们可以轻松地对异步操作进行测试。
结论
Jest 是一个非常强大的测试运行器，可以帮助我们测试异步 action 以及其他类型的 JavaScript 代码。在 Redux Store 中，我们使用 Redux Thunk 进行处理异步 action。如果你都使用 Jest 正确测试异步 action，你将拥有一个更加可靠的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a00389babaf620fa04b7d