如何用Jest测试React+TypeScript项目中Redux的dispatch调用

嘿，作为Jest新手，测试Redux的mapDispatchToProps其实挺直观的，核心就是验证当你调用onSelectScenario这个props方法时，是否正确触发了带有对应参数的dispatch调用。我来给你一步步拆解怎么写这个测试：

核心思路 #

我们需要完成这几个关键步骤：

• 创建一个模拟的dispatch函数（用Jest的jest.fn()）来追踪它的调用情况
• 通过mapDispatchToProps生成组件的props
• 调用props里的onSelectScenario并传入测试数据
• 断言模拟的dispatch函数被正确调用，且参数是预期的action

完整测试代码示例 #

假设你的容器组件文件是ScenarioContainer.tsx，action creator在scenarioActions.ts里，测试文件可以这么写：

// 导入需要的模块和函数
import { mapDispatchToProps } from './ScenarioContainer';
import { selectScenario } from './scenarioActions';

describe('ScenarioContainer mapDispatchToProps', () => {
  it('dispatches selectScenario with correct parameters when onSelectScenario is called', () => {
    // 1. 创建一个mock的dispatch函数，用来追踪调用
    const mockDispatch = jest.fn();

    // 2. 调用mapDispatchToProps，传入mock dispatch，得到组件的props
    const props = mapDispatchToProps(mockDispatch);

    // 3. 准备测试用的场景数据（可以根据你的实际类型调整）
    const testScenario = { id: 1, name: "Test Scenario", details: "Sample details" };

    // 4. 调用props中的onSelectScenario方法
    props.onSelectScenario(testScenario);

    // 5. 验证dispatch的调用情况
    // 首先确认dispatch被调用了一次
    expect(mockDispatch).toHaveBeenCalledTimes(1);
    // 然后确认dispatch的参数是selectScenario返回的正确action
    expect(mockDispatch).toHaveBeenCalledWith(selectScenario(testScenario));
  });
});

关键细节解释 #

• jest.fn()：这是Jest提供的模拟函数，它会记录所有调用的次数、参数、返回值等，方便我们做断言。
• 类型兼容：因为你的mapDispatchToProps里dispatch的类型是Dispatch<any>，所以用jest.fn()生成的模拟函数完全可以匹配这个类型，不需要额外的类型转换（如果需要更严格的类型，可以用const mockDispatch: jest.Mock<Dispatch<any>> = jest.fn();）。
• 断言action正确性：我们直接用selectScenario(testScenario)来对比dispatch的参数，这样可以确保不仅dispatch被调用了，而且传入的action是完全符合预期的。

这样写下来，就能准确验证你的onSelectScenario是否正确触发了对应的dispatch操作啦～

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