React-Redux：测试嵌套在其他Action中的已派发Action

没问题！要测试你的login thunk是否正确派发了handleSuccessfulAuthentication，咱们可以借助redux-mock-store这个工具——它专门用来测试异步Action（比如Thunk这类函数式Action）的派发行为。下面是一步步的具体操作：

1. 安装必要的测试依赖 #

首先需要安装redux-mock-store和redux-thunk（因为你的Action依赖Thunk中间件）：

npm install redux-mock-store redux-thunk --save-dev
# 如果你用Yarn的话
yarn add redux-mock-store redux-thunk --dev

2. 配置Mock Store #

在你的测试文件中，先配置好带有Thunk中间件的mock store，这样才能正确处理你的Thunk Action：

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
// 导入你要测试的Action和相关依赖
import { login, loginRequest, handleSuccessfulAuthentication } from './path-to-your-actions';
import sessionService from './path-to-your-session-service';

// 创建带有Thunk中间件的mock store工厂函数
const mockStore = configureMockStore([thunk]);

3. 模拟sessionService.login的成功返回 #

因为你已经用Mock模拟了服务，咱们可以用测试框架（比如Jest/Vitest）的mock功能，让sessionService.login返回一个成功的Promise：

// 模拟sessionService的login方法，返回预设的redirectTo路径
jest.mock('./path-to-your-session-service', () => ({
  login: jest.fn(() => Promise.resolve('/dashboard')) // 这里替换成你预期的redirectTo值
}));

4. 编写测试用例 #

接下来就可以写测试逻辑了，核心思路是：调用login Thunk，然后检查mock store中记录的Action是否包含handleSuccessfulAuthentication：

describe('login Thunk Action', () => {
  let store;

  // 每个测试前初始化空的mock store，并清除mock调用记录
  beforeEach(() => {
    store = mockStore({});
    jest.clearAllMocks();
  });

  it('should dispatch loginRequest and handleSuccessfulAuthentication on successful login', async () => {
    const testUsername = 'pablo_test';
    const testPassword = 'test_pass123';
    const expectedRedirect = '/dashboard';

    // 调用login Thunk并等待异步操作完成
    await store.dispatch(login(testUsername, testPassword));

    // 获取store中所有被派发的Action数组
    const dispatchedActions = store.getActions();

    // 验证第一个派发的Action是loginRequest
    expect(dispatchedActions[0]).toEqual(loginRequest());

    // 验证第二个派发的Action是handleSuccessfulAuthentication，且参数正确
    expect(dispatchedActions[1]).toEqual(handleSuccessfulAuthentication(expectedRedirect));

    // 可选：验证sessionService.login是否被正确调用
    expect(sessionService.login).toHaveBeenCalledWith(store.dispatch, testUsername, testPassword);
  });
});

关键说明 #

• 一定要用async/await（或者返回Promise）来等待Thunk的异步操作完成，否则测试会在Action执行完之前结束，导致断言失败。
• redux-mock-store会记录所有通过dispatch派发的Action，通过store.getActions()可以拿到完整的Action列表，方便我们逐个验证。
• 如果你的测试框架是Vitest，语法和Jest几乎一致，只需要把jest.mock换成vi.mock即可。

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