引言
Redux 是一个流行的 JavaScript 应用程序状态管理器，它允许在应用程序中统一管理状态，并利用可预测性和可调试性提高应用程序的可维护性。然而，Redux 中的异步 action 可能会给测试带来挑战，因为异步请求的响应是不确定的，而且可能需要等待一段时间才能返回结果。
Jest 是一个流行的 JavaScript 测试框架，它在许多领域都表现出色。在本文中，我们将探讨如何使用 Jest 测试 Redux 中的异步 action。
准备工作
在开始编写测试用例之前，我们需要确保已正确配置项目。以下是必需的前提条件:
- 安装 Jest：
npm install --save-dev jest - 安装 babel-jest：
npm install --save-dev babel-jest - 安装 redux 和 redux-thunk：
npm install --save redux redux-thunk
在安装这些必要的包之后，我们需要在 package.json 文件中添加 Jest 配置：
-- -------------------- ---- -------
-
---------- -
------- ------
--
------- -
------------ -
-------------- ------------
-
-
-这个配置文件告诉 Jest 在运行测试时将 ECMAScript 6 文件转换为 ECMAScript 5，使其在所有浏览器中都能运行。
编写测试用例
有几个步骤，我们需要遵循，以在 Jest 中测试 Redux 中的异步 action:
- 为异步 action 创建 action creator。
- 创建 mock API 函数。
- 编写测试用例，包括设置 Redux store 和使用 Jest 的 mock 函数。
我们将要测试一个简单的登录场景。在登录页面上，我们向服务器发送用户名和密码，如果验证成功，我们将获得一个带有用户令牌的响应。让我们看看如何使用 Redux 和 Jest 进行测试。
首先，我们需要创建 action creator，它将负责异步请求和响应。以下是一个简单的 login action creator：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
----- ------ - ------------------------------
------ -------- -------------- -
------ -
----- -------------
--
-
------ -------- ------------------- -
------ -
----- --------------
-----
--
-
------ -------- ------------------- -
------ -
----- --------------
-----
--
-
------ -------- --------------- --------- -
------ -------- -- -
-------------------------
------ ------------------ - --------- -------- --------
-------- -- -
--------------------------------------------
--
----- -- -
--------------------------------------------------
-
--
--
-由于 Redux 只能处理同步操作，因此我们使用了 Redux Thunk 中间件来处理异步操作。该 action creator 总是返回一个函数，这个函数接收 dispatch 方法作为其唯一参数，并使用它来触发其他传统的同步 action。
接下来，我们需要创建一个 mock API 函数用于通过 axios 模拟异步登录请求：
-- -------------------- ---- -------
------ ----------- ---- ---------------------
------ ----- ---- --------
------ ------- ---------- -
----- ---- - --- -------------------
----- ----- - --------
------------------------------------------------------- -- -
----- - --------- -------- - - ------------------------
-- --------- --- ------ -- -------- --- ----------- -
------ -
----
-
-----
-
--
- ---- -
------ -
----
-
------ -------- ------------
-
--
-
---
------ -----
-我们使用 axios-mock-adapter 来模拟异步请求，并进行各种验证。
现在我们已经准备好编写测试用例了。根据我们的 login action creator，我们期望以下三个 action 会被触发：LOGIN_REQUEST、LOGIN_SUCCESS和LOGIN_FAILURE。以下是一个简单的测试：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - -------------- -------------- -------------- ----- - ---- ------------------
----- ---- - ------------
----------- ------ --------- -- -- -
----- -------- - -------
----- -------- - -----------
----- -------- - ----------
------------------------------------------ - --------- -------- ------------- -
------ -------
---
------ --------------- --------------------------- -- -
------------------------------------------- ----- ------------- ---
------------------------------------------- ----- -------------- ------ ------- ---
---
---在这个测试用例中有几个关键点：
- 我们创建了一个名为
mock的 axios mock，并在测试用例之前立即启动它。 - 我们使用
jest.fn()创建了一个名为dispatch的 mock 函数。 - 在请求成功的回调函数中，我们使用
expect()断言来确保正确的 action 被触发。
这个测试用例覆盖了所有情况，包括成功登录和无效凭据。并且使用了 Jest 提供的 mock.calls 方法来确保正确的 action 获得了正确的 payload。
结论
Jest 是一个强大的测试框架，在测试 Redux 中的异步 action 时特别有用。无论你是在本地还是通过 CI/CD 测试，都可以使用 Jest 测试异步操作。通过编写 mock 函数，我们可以确保我们的测试可重复且不受外部因素的干扰。
完整代码
以下是这个示例应用程序的完整代码。
-- -------------------- ---- -------
-- ------------------
------ ----- ---- --------
------ ----------- ---- ---------------------
------ ------- ---------- -
----- ---- - --- -------------------
----- ----- - --------
------------------------------------------------------- -- -
----- - --------- -------- - - ------------------------
-- --------- --- ------ -- -------- --- ----------- -
------ -
----
-
-----
-
--
- ---- -
------ -
----
-
------ -------- ------------
-
--
-
---
------ -----
-
-- ---------------
------ ----- ---- --------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
----- ------ - ------------------------------
------ -------- -------------- -
------ -
----- -------------
--
-
------ -------- ------------------- -
------ -
----- --------------
-----
--
-
------ -------- ------------------- -
------ -
----- --------------
-----
--
-
------ -------- --------------- --------- -
------ -------- -- -
-------------------------
------ ------------------ - --------- -------- --------
-------- -- -
--------------------------------------------
--
----- -- -
--------------------------------------------------
-
--
--
-
-- ----------------------
------ --------- ---- ---------------------
------ - -------------- -------------- -------------- ----- - ---- ------------------
----- ---- - ------------
----------- ------ --------- -- -- -
----- -------- - -------
----- -------- - -----------
----- -------- - ----------
------------------------------------------ - --------- -------- ------------- -
------ -------
---
------ --------------- --------------------------- -- -
------------------------------------------- ----- ------------- ---
------------------------------------------- ----- -------------- ------ ------- ---
---
---以上代码使用了 redux, redux-thunk 和 Jest，它还有一个简单的 mock API 功能，能够完美地测试 Redux 中的异步 action。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a01b4d91dce0dc87db5e1