在前端开发中，异步操作在应用程序中十分常见。而 Redux 是一种非常流行的状态管理库，它提供了一个可预测性的状态容器，使得模拟异步操作成为了一项必需的技能。
Jest 是一个流行的 JavaScript 测试框架，它可以轻松地测试 Redux Store 中的异步操作。接下来，我将介绍如何使用 Jest 编写并运行测试用例，以测试 Redux Store 中的异步代码。
安装 Jest
首先，我们需要安装 Jest。可以通过 npm 命令行来安装：
npm install jest
创建测试文件
接着，我们需要在我们的项目中创建一个测试文件，来编写测试用例。假设 Redux Store 存储在 store.js 中，则可以在项目的根目录下创建一个名为 store.test.js 的文件。
在该文件中，我们需要导入所需的依赖项，包括 redux 和 Redux Store。然后，编写测试用例。
测试异步 Redux Action
Redux 中的异步操作通常是由 Redux Action 来触发的。我们将以 Redux Action 作为起点，测试异步操作。
首先，我们来编写一个异步操作的 Redux Action。下面是一个使用 Redux Thunk middleware 的示例代码：
import axios from 'axios';
export const fetchUser = () => {
return async (dispatch) => {
const res = await axios.get('/api/user');
dispatch({ type: 'FETCH_USER', payload: res.data });
};
};在上述代码中，我们使用了 axios 库来实现一个 HTTP GET 请求，返回结果将作为 Redux Action 的 payload，存储在 Store 中。
接着，我们来编写一个 Jest 测试用例，用于测试上述 Redux Action：
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ ----------- ---- ---------------------
------ ----- ---- --------
------ - --------- - ---- ------------
----- ----------- - --------
----- --------- - --------------------------------
--------------------- -- -- -
--- ----------
------------- -- -
--------- - --- -------------------
---
------------ -- -
------------------
---
---------- -------- ---------- ---- -------- ------ ----- -- -- -
----- ----- - --------------
----- ---- - - ----- ----- ---- --
--------------------------------------- ------
----- ----------------------------
----- ------- - -------------------
----------------------------------------------
-----------------------------------------
---
---在上述测试用例中，我们首先使用 redux-mock-store 模拟了一个 Redux Store，然后使用 axios-mock-adapter 模拟了一个 HTTP GET 响应。接着，我们使用 store.dispatch(fetchUser()) 来触发 Redux Action，最后使用 store.getActions() 获取所有的 Action，并判断其结果是否符合预期。
测试异步 Redux Reducer
除了测试 Redux Action，我们还需要测试 Redux Reducer 的行为。Redux Reducer 用于计算 State 的下一个状态，并使用 Store 中的 Action 来修改现有状态。
接下来，我们假设上述示例中的 Redux Reducer 如下所示：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ ----- ----------- - ------ - ----- ------- -- -
-- ------------ --- ------------- -
------ -------------- -- ------
-
------ ------
--
------ ------- -----------------
----- ------------
---在上述代码中，我们定义一个名为 userReducer 的 Reducer，用于处理 FETCH_USER Action。Reducer 接受当前状态和要执行的 Action，返回计算出的下一个状态。
现在，我们来编写一个 Jest 测试用例，用于测试 Redux Reducer 的行为：
-- -------------------- ---- -------
------ ----------- ---- -------------
----------------------- -- -- -
---------- ------ --- ------- ------- -- -- -
----------------------------- --------------
----- -----
---
---
---------- ------ ------------ -- -- -
----- --------- - - ----- ---- --
----- ------ - - ----- ------------- -------- - ----- ----- ---- - --
----- --------- - ---------------------- --------
--------------------------- ----- - ----- ----- ---- - ---
---
---在上述代码中，我们定义了一个名为 rootReducer 的 Reducer，用于处理 CombineReducers 中的所有 reducers。接着，我们在测试用例中使用 rootReducer 来测试初始状态和 FETCH_USER Action 的效果。
结论
使用 Jest 测试 Redux Store 中的异步操作十分方便，尤其是在我们使用了一些库如 Redux Thunk 之后。通过编写适当的测试用例，我们可以在编写代码时进行适当的测试，确保代码的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677505c66d66e0f9aaf30a9e