在开发前端项目时，Jest 是一个常用的测试框架，而 redux-thunk 则是 Redux 应用中常用的中间件，用于处理异步操作。在使用 Jest 进行单元测试时，我们经常需要模拟函数的返回值或处理函数中的参数，这也包括了 redux-thunk 中的 dispatch 参数。
为什么需要 mock dispatch 参数？
在 Redux 应用中，dispatch 是一个用于触发 action 并执行 reducer 的函数。当使用 redux-thunk 中间件时，dispatch 不仅可以触发同步的 action，还可以触发异步的 action，并在异步操作完成后再次调用 dispatch 函数。在测试阶段，我们需要确保测试代码能够正确地处理不同的 action 和相关数据，因此需要考虑如何 mock dispatch 函数及其参数。
如何 mock dispatch 的参数
一种解决办法是使用 Jest 提供的 spyOn 函数来监视并修改 dispatch 函数。通过对 dispatch 的监视，我们可以在测试函数中手动指定 dispatch 函数的参数，并验证相应的操作是否得到正确的响应。
下面是一个例子，展示了如何在 Jest 下 mock 掉 dispatch 参数：
// javascriptcn.com 代码示例
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const mockDispatch = jest.fn();
const getState = () => ({});
mockDispatch.mockReturnValue({ type: "MOCKED_ACTION" });
const store = mockStore(getState);
jest.mock("redux-thunk", () => {
return {
__esModule: true,
default: (store) => (next) => (action) => typeof action === "function"
? action(mockDispatch, getState, {})
: next(action),
};
});
describe("mock dispatch test", () => {
it("should test mocked dispatch method", () => {
const mockedAction = () => (dispatch) => {
return dispatch({ type: "TEST_ACTION" });
};
return store.dispatch(mockedAction()).then(() => {
expect(mockDispatch).toHaveBeenCalledWith({ type: 'TEST_ACTION' })
});
});
});在这个例子中，我们通过使用 Jest 提供的 jest.fn() 函数来创建了一个指定接口的 mock dispatch 函数，并在测试用例中使用它来验证异步操作的执行结果。
总结
当需要测试 redux-thunk 中包含 dispatch 参数的异步操作时，在 Jest 测试环境下要想正确地 mock 掉这些参数需要按照以下步骤进行：
在测试文件中导入需要测试的 Redux Store
使用
configureMockStore函数创建一个mock的Store使用
jest.spyOn()函数监视 dispatch 方法使用 Jest 提供的语法糖
jest.mock()修改 Redux-thunk 的行为更新监视到的 dispatch 方法
确认是否切实发生状态变更，获取预期值
在完成这些步骤后，可以使用 Jest 来运行单元测试，该测试将会对 redux-thunk 的异步中间件和对应模块的全部代码执行完整的测试过程。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65290de97d4982a6ebba0d4a