Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以在多个组件之间共享数据。然而，Redux 中的异步操作可能会让测试变得更加困难。幸运的是，我们可以使用 Enzyme 和 Jest 测试库来测试 Redux 中的异步操作。本文将介绍如何使用 Enzyme 和 Jest 测试 Redux 中的异步操作。
安装和配置
在我们开始编写测试之前，让我们先安装和配置必要的工具。首先，我们需要安装以下软件包：
enzyme: React 测试库enzyme-adapter-react-16: 适配器，用于将 Enzyme 与 React 16 兼容
我们还需要安装 Jest 库，它是一个流行的 JavaScript 测试框架，我们将用它来编写测试代码。
npm install --save-dev enzyme enzyme-adapter-react-16 jest
然后，我们需要配置 Enzyme 以使用 React 16 适配器。我们可以在测试文件的顶部添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });编写测试用例
现在我们已经安装和配置了必要的工具，可以开始编写测试用例了。我们将从以下示例代码开始：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------------- - ----------------------
------ ----- ------------------- - ----------------------
------ ----- ----------------- - --------------------
------ -------- ------------ -
------ ---------- -- -
---------- ----- ------------------- ---
------ -------------------
-------------- -- -
----------
----- --------------------
-------- -------------
--
--
------------ -- -
----------
----- ------------------
-------- -------------
--
---
--
-这个示例代码是一个 Redux action，它将通过 axios 库发起请求，获取用户列表，并根据请求结果分发不同类型的 Redux action。我们将编写一个测试用例来测试这个 action。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -------------------
------ --------------- ---- --------------
------ -
--------------------
--------------------
------------------
-----------
- ---- ----------
----- --------- - --------------------------------------
-------------------
-------------------- -------- -- -- -
---------- -------- ------------------- --- ------------------- -- ---------- --------- -- -- -
----- -------- - - ----- - - --- -- ----- ------ - - --
--------------------------------------
----- --------------- - -
- ----- ------------------- --
- ----- -------------------- -------- ------------- -
--
----- ----- - ----------- ------ -- ---
------ ----------------------------
-------- -- -
----------------------------------------------------
---
---
---------- -------- ------------------- --- ----------------- -- ------ --------- -- -- -
----- ----- - --- ---------------
-----------------------------------
----- --------------- - -
- ----- ------------------- --
- ----- ------------------ -------- ------------- -
--
----- ----- - ----------- ------ -- ---
------ ----------------------------
-------- -- -
----------------------------------------------------
---
---
---这个测试用例包括两个测试，分别测试成功和失败情况的 Redux action。我们使用 redux-mock-store 库模拟 Redux store，使用 redux-thunk 库模拟 Redux action 中的异步操作。在这个测试用例中，我们已经设置了 axios 库返回成功的和失败的数据，然后检查我们的 action 是否为预期的类型和负载。
结论
使用 Enzyme 和 Jest 测试库可以帮助我们测试 Redux 中的异步操作。在测试 Redux 异步操作的时候，我们可以使用 Redux Thunk 中间件来模拟异步操作。在测试过程中，我们可以使用 redux-mock-store 库来模拟 Redux store，并使用 axios 库进行异步请求的模拟。
通过编写测试代码，我们可以确保我们的异步 Redux action 在运行时不会出错，并且当异步操作成功或失败时 Redux store 中的状态正确更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674989d9a1ce0063546530fd