如何测试Redux的mapDispatchToProps中dispatch的调用次数？

你的测试现在没达到预期的核心原因很简单——你只是初始化了mapDispatchToProps，但从来没调用它返回的那些会触发dispatch的方法，所以dispatch一次都没被执行，你的断言toHaveBeenCalledTimes(2)肯定会失败。咱们一步步把测试改对：

先说说你当前测试的问题 #

你现在的测试代码只做了两件事：

1. 创建了一个Jest mock的dispatch函数
2. 调用mapDispatchToProps(dispatch)拿到了包含hideSidebar和updateUnit的对象，但完全没调用这两个方法

这就像你拿到了游戏手柄，却没按任何按键，然后疑惑为什么游戏没反应一样😉

正确的测试写法 #

我们需要分别（或一起）调用mapDispatchToProps返回的方法，再验证dispatch的调用情况。这里分两种常见场景：

场景1：单独测试每个方法的dispatch调用

比如测试hideSidebar是否正确触发dispatch：

describe('mapDispatchToProps', () => {
  test('hideSidebar 应该调用dispatch一次，且参数正确', () => {
    // 创建mock dispatch函数
    const dispatch = jest.fn(() => Promise.resolve());
    // 获取映射后的props方法
    const props = mapDispatchToProps(dispatch);
    
    // 关键步骤：调用要测试的方法！
    props.hideSidebar();
    
    // 验证dispatch被调用了1次
    expect(dispatch).toHaveBeenCalledTimes(1);
    // 额外验证调用的action是否正确（这一步很重要，确保dispatch的是你预期的action）
    expect(dispatch).toHaveBeenCalledWith(hideSidebar);
  });
});

场景2：测试多个方法调用后的总dispatch次数

如果你想验证调用hideSidebar和updateUnit后，dispatch总共被调用2次，可以这么写：

describe('mapDispatchToProps', () => {
  test('调用hideSidebar和updateUnit后，dispatch应被调用2次', () => {
    const dispatch = jest.fn(() => Promise.resolve());
    const props = mapDispatchToProps(dispatch);
    
    // 依次调用两个方法
    props.hideSidebar();
    // 传入一个测试用的unitObject
    props.updateUnit({ id: 1, label: 'Test Unit' });
    
    // 验证总调用次数为2
    expect(dispatch).toHaveBeenCalledTimes(2);
    // 可选：验证updateUnit对应的dispatch参数是否正确
    expect(dispatch).toHaveBeenCalledWith(
      settingsActions.updateArray({ id: 1, label: 'Test Unit' })
    );
  });
});

额外的小建议 #

• 如果你是在测试连接Redux的组件，也可以用React测试库（比如@testing-library/react）结合Redux的Provider来测试组件交互，但单独测试mapDispatchToProps的话，上面的方法就足够简洁高效。
• 针对你返回Promise的dispatch，测试时可以用async/await确保测试等待异步操作完成：

  test('异步方法的dispatch测试', async () => {
    const dispatch = jest.fn(() => Promise.resolve());
    const props = mapDispatchToProps(dispatch);
    
    await props.someAsyncActionMethod();
    
    expect(dispatch).toHaveBeenCalledTimes(1);
  });
  

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