如何使用Jest测试Redux Action触发时调用的方法

你要验证dispatch fooAction时setFoo是否被正确调用，这里需要结合Redux Saga的测试工具和mock函数来实现，我帮你把测试代码补全并解释：

首先，完善你的测试文件，需要引入Redux Saga的中间件、要测试的saga和方法，以及用mock函数来监听setFoo的调用：

import configureStore from 'redux-mock-store';
import createSagaMiddleware from 'redux-saga';
import { takeEvery } from 'redux-saga/effects';
import { foo } from '../actions';
import { watchFoo, setFoo } from '../services';

// 用jest mock掉setFoo，方便跟踪调用情况
jest.mock('../services', () => ({
  ...jest.requireActual('../services'),
  setFoo: jest.fn(),
}));

describe('test setFoo is called when fooAction is dispatched', () => {
  let sagaMiddleware;
  let mockStore;

  beforeEach(() => {
    // 创建saga中间件并配置mock store
    sagaMiddleware = createSagaMiddleware();
    mockStore = configureStore([sagaMiddleware]);
  });

  it('should trigger setFoo when fooAction is dispatched', () => {
    // 创建store实例
    const store = mockStore({});
    // 启动watchFoo saga监听
    sagaMiddleware.run(watchFoo);

    // dispatch foo action
    store.dispatch(foo());

    // 断言setFoo被调用了一次
    expect(setFoo).toHaveBeenCalledTimes(1);
  });
});

关键步骤解释： #

• Mock setFoo函数：用jest.mock替换原函数为jest的mock函数，这样我们就能通过toHaveBeenCalledTimes这类断言来验证它是否被调用。
• 配置带Saga中间件的Mock Store：因为你的逻辑是通过Redux Saga监听action，所以必须把saga中间件加入到mock store的中间件列表里，否则saga无法监听到action。
• 启动Saga监听：调用sagaMiddleware.run(watchFoo)启动监听saga，这样它才能响应后续dispatch的action。
• Dispatch Action并断言：dispatch对应的action后，直接检查mock函数的调用情况即可。

另外，如果你用的是Sinon而不是Jest，只需要把mock函数换成Sinon的sinon.spy()或者sinon.stub()就行，核心逻辑是一致的。

内容的提问来源于stack exchange，提问作者Vinod Kolla