如何为Redux Thunks提供Mock实现？我的Mock代码未生效？

核心错误点 #

• Mock实现不符合Thunk函数结构
  原getRequest是返回异步Thunk函数的高阶函数，你的mock直接返回了mockReqResponse函数本身，而非符合Thunk格式的函数（即接受dispatch参数的异步函数）。当getBanks中调用dispatch(getRequest())时，传入dispatch的不是合法Thunk函数，导致mock逻辑无法触发。

• 测试结构错误
  describe的回调函数不能是async，异步逻辑必须放在it/test测试块内部执行。

• 变量名拼写错误
  测试代码里的action.getBanks()应为actions.getBanks()，与导入的变量名保持一致。

• 原actions逻辑缺陷
  getBanks中未await dispatch(getRequest())的结果，导致response是Promise对象，永远为真，无法进入failure分支。

修复后的测试代码 #

import * as actions from 'actions';
import mockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [thunk];
const createMockStore = mockStore(middlewares);

describe('getBanks should work', () => {
  it('dispatches success action when getRequest returns data', async () => {
    // 正确Mock：返回符合Thunk格式的函数
    jest.spyOn(actions, 'getRequest').mockImplementation(() => async () => {
      return { data: '1123' };
    });

    const store = createMockStore({});
    await store.dispatch(actions.getBanks());

    // 验证是否触发success动作
    const dispatchedActions = store.getActions();
    expect(dispatchedActions).toContainEqual(actions.success());
  });

  it('dispatches failure action when getRequest returns falsy value', async () => {
    jest.spyOn(actions, 'getRequest').mockImplementation(() => async () => {
      return null;
    });

    const store = createMockStore({});
    await store.dispatch(actions.getBanks());

    const dispatchedActions = store.getActions();
    expect(dispatchedActions).toContainEqual(actions.failure());
  });
});

同步修复原actions.js逻辑 #

export const getBanks = () => async dispatch => {
    // 必须await dispatch结果，才能拿到实际返回值
    const response = await dispatch(getRequest());
    if (!!response) {
        dispatch(success());
    } else {
        dispatch(failure());
    }
};

内容的提问来源于stack exchange，提问作者Hitendra singh