Redux 是一个非常流行的状态管理库，而 Enzyme 是一种常用的测试工具，用于测试 React 组件。在编写前端应用程序时，需要使用测试工具来测试 Redux 异步 Action Creator 的正确行为。在本文中，我们将深入探讨如何使用 Enzyme 对 Redux 中的异步 Action Creator 进行测试。
准备工作
在开始之前，您需要安装一些依赖项。请在终端中使用以下命令安装它们：
npm install --save-dev enzyme enzyme-adapter-react-16 redux-mock-store
在安装完上述依赖项之后，我们需要使用 Enzyme Adapter 来初始化 Enzyme。可以通过在应用程序中的入口点中添加以下代码来完成此操作：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });此代码段将 Enzyme Adapter 初始化为与 React 16 兼容的版本。
接下来，我们需要创建一个 Redux store 的模拟实例。我们可以使用 redux-mock-store 来创建此存储。下面是一个示例代码：
import configureMockStore from 'redux-mock-store';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
const middlewares = [thunkMiddleware, createLogger()];
const mockStore = configureMockStore(middlewares);这应该是您的准备工作。
编写测试用例
首先，我们需要编写一个测试用例来测试 Redux 中的异步 Action Creator。在这个例子中，我们将使用 axios 库向远程服务器发送请求。假设您的 Action Creator 如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- ---------------- - -- -- -
------ -
----- ------------------
--
--
------ ----- ---------------- - ------ -- -
------ -
----- -------------------
-------- ----
--
--
------ ----- ---------------- - ------- -- -
------ -
----- -------------------
-------- -----
--
--
------ ----- --------- - ----- -- -
------ ---------- -- -
-----------------------------
--------------
---------------- -- -
----- ---- - --------------
---------------------------------
--
-------------- -- -
----- ------------ - --------------
-----------------------------------------
---
--
--此 Action Creator 将向给定的 URL 发送请求，并在成功或失败时触发相应的 Action。
我们可以编写以下测试用例来测试 Action Creator 是否按预期工作：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------
------ - --------- - ---- -------------
------ - ------------------- ------------------- ------------------ - ---- -------------------
------ ------------------ ---- -------------------
----- ----------- - --------
----- --------- - --------------------------------
-------------------
--------------------- -- -- -
---------- -------- ------------------ --- ------------------ -- --------- -- -- -
----- ------------ - - ----- ------ --
------------------------------------------
----- --------------- - -
- ----- ------------------ --
- ----- ------------------- -------- ------------ -
--
----- ----- - --------------
------ ---------------------------------------------
-------- -- -
----------------------------------------------------
---
---
---------- -------- ------------------ --- ------------------ -- ------- -- -- -
----- ------------ - --- ----- ----------
----------------------------- -------- ------------ ---
----- --------------- - -
- ----- ------------------ --
- ----- ------------------- -------- ------------ -
--
----- ----- - --------------
------ ---------------------------------------------
-------- -- -
----------------------------------------------------
---
---
---此测试用例会测试 Action Creator 是否正确地分派了 FETCH_DATA_REQUEST 和 FETCH_DATA_SUCCESS 或 FETCH_DATA_FAILURE 行动。此外，我们还使用 axios 的 jest.mock 函数将 axios 库替换为模拟实现，以便我们可以测试此 Action Creator 是否正确地处理异步请求。
结论
在本文中，我们深入探讨了如何使用 Enzyme 测试 Redux 中的异步 Action Creator。我们讨论了准备工作并编写了一个测试用例，使用 redux-mock-store 和 axios 库的模拟实现来测试 Action Creator 是否按预期工作。这让您可以编写强大、高效且可靠的代码来测试 Redux 应用程序的状态管理和异步行为。希望这篇文章对您学习 Redux 和测试 Enzyme 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67180f0bad1e889fe226932c