在前端开发中，Redux 已经成为了一个非常流行的状态管理工具。而在 Redux 中，异步操作是一个重要的部分，但是测试其异步操作并不容易。本文将介绍如何使用 Jest 在 Redux 中测试异步操作。
Redux 异步操作简介
在 Redux 中，异步操作是指从后端获取数据、更新本地数据、发送请求等等操作。Redux 异步操作需要我们使用 Thunk、Saga、Observable 或其他中间件来进行实现。在测试过程中，我们最终的目标是检查异步操作是否产生了正确的行为。这个目标与同步操作不同，因为异步操作不是立刻执行完毕的。
使用 Jest 测试异步操作
Jest 是一个流行的 JavaScript 测试框架。它可以用于测试 Redux 异步操作。在测试前，我们需要进行一些准备工作：
安装库
npm install --save-dev redux-mock-store fetch-mock jest-mock-axios
在测试文件中导入库
import configureMockStore from 'redux-mock-store' import thunk from 'redux-thunk' import fetchMock from 'fetch-mock' import axios from 'axios' import MockAdapter from 'jest-mock-axios'
配置 mock store
const middlewares = [thunk] const mockStore = configureMockStore(middlewares)
到了这一步，我们可以开始测试了。下面是一个示例，用于测试一个异步操作。
-- -------------------- ---- -------
------ - ---------- - ---- ------------------------
------ - ------------ ----------- - ---- ------------------
----- --------- - ---------------------------
-- - --------- ----
-------------------------------- - ----
--------------- ------- -- -- -
------------ -- -
-------------------
--
------------- ------- ----- -- -- -
-- -----
----- ----- - -
----- -
-
--- --
----- ----- ---
--
-
--- --
----- ----- ---
--
--
-
-------------------------------------- ------
----- --------------- - -
- ----- ----------- --
-- ---------- ----------- ------
- ----- ------------ -------- ---------- --
-
----- ----- - -------------
-- ------
----- ----------------------------
---------------------------------------------------
--
--在这个示例中，我们测试了 fetchUsers 异步操作。首先，我们在 MockAdapter 上配置了一个模拟的/users 请求，当收到该请求时，它将返回模拟的用户数据。接着，我们断言在“请求”开始前，store 应该先发出一个 CLEAR_USERS 的 action，在“请求”完成后，store 应该接收到一个 FETCH_USERS 的 action。
总结
在 Redux 中，异步操作是一个重要的部分。使用 Jest 测试 Redux 异步操作可以确保它们正确的行为。在测试异步操作时，我们需要确保在 dispatch 之前存储已经准备好了期望的 actions。总之，测试 Redux 异步操作可以更方便的确保我们代码的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647af33e968c7c53b068b091