在前端开发中，Redux 是一个非常流行的状态管理库，它可以让我们更好地管理应用程序的状态。然而，Redux 中的异步操作可能会导致测试变得困难，因为异步操作可能会影响测试的结果。在这篇文章中，我们将介绍如何使用 Jest 测试 Redux 中的异步操作。
前置知识
在本文中，我们假设你已经熟悉 Redux 和 Jest 的基本概念。
安装 Jest
首先，我们需要在项目中安装 Jest。可以使用以下命令：
npm install --save-dev jest
配置 Jest
接下来，我们需要在项目中添加 Jest 的配置文件。在项目的根目录下创建一个名为 jest.config.js 的文件，并添加以下代码：
module.exports = {
testEnvironment: 'node',
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
}
}这个配置文件告诉 Jest 使用 Node.js 环境运行测试，并且在运行测试之前运行 setupTests.js 文件。还指定了一个模块名称映射，用于将 @ 符号映射到项目中的 src 目录。
编写测试用例
现在，我们可以开始编写测试用例了。我们将使用一个简单的 Redux 异步操作作为示例。假设我们有一个名为 fetchData 的异步操作，它从远程服务器获取数据并将其存储在 Redux store 中。
首先，我们需要编写一个 Redux action，用于触发异步操作。在项目的 src/actions 目录下创建一个名为 dataActions.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
------ ----- ---------------- - -- -- --
----- ------------------
--
------ ----- ---------------- - ---- -- --
----- -------------------
-------- ----
--
------ ----- ---------------- - ----- -- --
----- -------------------
-------- -----
--
------ ----- --------- - -- -- -
------ ----- -------- -- -
----------------------------
--- -
----- -------- - ----- -------------------------------------
----- ---- - ----- ---------------
--------------------------------
- ----- ------- -
---------------------------------
-
-
-这个文件定义了三个 Redux action：FETCH_DATA_REQUEST、FETCH_DATA_SUCCESS 和 FETCH_DATA_FAILURE。还定义了一个 fetchData 异步操作，它将触发 FETCH_DATA_REQUEST action，并从远程服务器获取数据。如果成功，它将触发 FETCH_DATA_SUCCESS action，并将数据作为 payload 存储在 store 中。如果失败，它将触发 FETCH_DATA_FAILURE action，并将错误作为 payload 存储在 store 中。
接下来，我们需要编写一个测试用例来测试这个异步操作。在项目的 src/__tests__ 目录下创建一个名为 dataActions.test.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ------------------ ---- ------------------
------ ----- ---- -------------
------ --------- ---- ------------
------ -
-------------------
-------------------
-------------------
---------
- ---- -----------------------
----- ----------- - -------
----- --------- - -------------------------------
----------------------- -- -- -
------------ -- -
-----------------
-------------------
--
----------- ------------------ ---- -------- ---- --- ---- ------ -- -- -
------------------------------------------------- -
----- - ----- ------ --
-------- - --------------- ------------------ -
--
----- --------------- - -
- ----- ------------------ --
- ----- ------------------- -------- - ----- ------ - -
-
----- ----- - ----------- ----- -- --
------ ----------------------------------- -- -
---------------------------------------------------
--
--
----------- ------------------ ---- -------- ---- --- -------- -- -- -
------------------------------------------------- -
------- ----
-------- - --------------- ------------------ -
--
----- --------------- - -
- ----- ------------------ --
- ----- ------------------- -------- --- ---------- ------- -
-
----- ----- - ----------- ----- -- --
------ ----------------------------------- -- -
---------------------------------------------------
--
--
--这个测试用例使用了 redux-mock-store、redux-thunk 和 fetch-mock 这三个库来模拟 Redux store、Redux 异步操作和网络请求。它包含两个测试用例：一个测试用例测试异步操作成功的情况，另一个测试用例测试异步操作失败的情况。
运行测试
现在，我们可以运行测试了。在项目的根目录下运行以下命令：
npm test
Jest 将运行我们编写的测试用例，并报告测试结果。如果测试通过，我们将看到一个绿色的 PASS 标志；如果测试失败，我们将看到一个红色的 FAIL 标志，并且会显示测试失败的原因。
总结
在本文中，我们介绍了如何使用 Jest 测试 Redux 中的异步操作。我们使用了一个简单的示例来演示如何编写测试用例，并使用 redux-mock-store、redux-thunk 和 fetch-mock 这三个库来模拟 Redux store、Redux 异步操作和网络请求。希望这篇文章对你有所帮助，让你更好地理解如何测试 Redux 异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ccdcbeb4cecbf2d29302d