如何为Redux-Thunk中多条件分支编写单元测试？

没问题！要测试你这个goToNewExperience thunk里的不同逻辑分支，我们可以用redux-mock-store来模拟Redux store，再配合Jest这类断言库，逐个验证每个分支的action派发行为。下面是具体的步骤和测试代码示例：

准备工作 #

首先确保你安装了必要的测试依赖：

npm install --save-dev redux-mock-store jest
# 或者用yarn
yarn add --dev redux-mock-store jest

编写测试用例 #

我们可以针对每个逻辑分支单独写测试，确保每种场景下的action派发都符合预期。另外注意一下：你原代码里的action对象语法有问题（{ type: UPDATE_EXP, 'NewExperience' }是无效的对象字面量），建议修正为带键值对的形式，比如{ type: UPDATE_EXP, payload: 'NewExperience' }，下面的测试代码会基于修正后的写法。

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { goToNewExperience, UPDATE_EXP } from './your-action-file-path'; // 替换成你的action文件路径

// 配置带thunk中间件的mock store
const mockStore = configureMockStore([thunk]);

describe('goToNewExperience thunk', () => {
  let mockDispatch;
  let mockGetState;

  beforeEach(() => {
    // 每次测试前重置mock函数
    mockDispatch = jest.fn();
    mockGetState = jest.fn();
  });

  // 测试分支1：当isNewExp为true时，派发NewExperience的action
  test('dispatches NewExperience action when isNewExp is true', async () => {
    // 模拟getState返回的状态
    mockGetState.mockReturnValue({ isNewExp: true });

    // 调用thunk函数
    await goToNewExperience()(mockDispatch, mockGetState);

    // 断言dispatch被调用了正确的action
    expect(mockDispatch).toHaveBeenCalledWith({
      type: UPDATE_EXP,
      payload: 'NewExperience'
    });
  });

  // 测试分支2：当isNewExp为false且request.isError为true时，派发ErrorExperience的action
  test('dispatches ErrorExperience action when isNewExp is false and request has isError: true', async () => {
    mockGetState.mockReturnValue({ isNewExp: false });
    const mockErrorRequest = { isError: true };

    await goToNewExperience(mockErrorRequest)(mockDispatch, mockGetState);

    expect(mockDispatch).toHaveBeenCalledWith({
      type: UPDATE_EXP,
      payload: 'ErrorExperience'
    });
  });

  // 测试分支3：当两个条件都不满足时，不派发任何action
  test('does not dispatch any action when neither condition is met', async () => {
    // 场景1：isNewExp为false，不传request参数
    mockGetState.mockReturnValue({ isNewExp: false });
    await goToNewExperience()(mockDispatch, mockGetState);
    expect(mockDispatch).not.toHaveBeenCalled();

    // 场景2：isNewExp为false，request的isError为false
    mockGetState.mockReturnValue({ isNewExp: false });
    const mockValidRequest = { isError: false };
    await goToNewExperience(mockValidRequest)(mockDispatch, mockGetState);
    expect(mockDispatch).not.toHaveBeenCalled();
  });
});

关键思路说明 #

• 我们用jest.fn()来mockdispatch和getState函数，这样可以精准控制返回值，并且断言函数的调用情况。
• 每个测试用例只关注一个分支逻辑，保证测试的单一职责，方便定位问题。
• 使用async/await来处理thunk的异步逻辑，确保在断言前thunk已经执行完成。

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