如何用Karma+Enzyme对调用Store.dispatch()的React组件做单元测试？

刚好我之前处理过类似的场景，你的PageLoading组件在componentDidMount里触发了Redux的dispatch，要测试这个行为的核心就是mock掉真实的Redux store，追踪dispatch的调用情况，下面是具体的实现步骤和测试代码：

核心思路 #

我们不需要操作真实的store（避免测试污染应用状态），而是创建一个mock版本的store，让它的dispatch方法变成可追踪的函数，然后通过Enzyme挂载组件，验证dispatch是否按预期被调用。

具体测试代码 #

首先，我们需要mock你的store模块，然后编写测试用例：

// 先mock掉真实的store，替换成带mock dispatch的对象
jest.mock('src/home/store', () => ({
  dispatch: jest.fn()
}));

import React from 'react';
import { mount } from 'enzyme';
import store from 'src/home/store';
import PageLoading from './PageLoading';

describe('PageLoading Component', () => {
  // 每个测试前清空dispatch的调用记录，避免测试间互相影响
  beforeEach(() => {
    store.dispatch.mockClear();
  });

  it('dispatches the correct SET_NOTIFICATION_DIALOG action when component mounts', () => {
    const testMessage = '正在加载页面...';
    
    // 用mount挂载组件（shallow不会触发componentDidMount，所以用mount）
    mount(<PageLoading message={testMessage} />);

    // 断言dispatch被调用了一次
    expect(store.dispatch).toHaveBeenCalledTimes(1);
    
    // 断言传入的action参数完全符合预期
    expect(store.dispatch).toHaveBeenCalledWith({
      type: 'SET_NOTIFICATION_DIALOG',
      status: '200',
      message: testMessage,
      model: 'LOADING'
    });
  });
});

关键细节说明 #

• 为什么用mount而不是shallow？：因为shallow渲染不会触发组件的componentDidMount生命周期钩子，而我们要测试的逻辑刚好在这个钩子里面，所以必须用mount进行完整渲染。
• mock store的作用：通过jest.mock替换真实的store模块，让dispatch变成一个mock函数，这样我们可以轻松追踪它的调用次数、传入参数，而不会修改真实的应用状态。
• 重置mock记录：在beforeEach里调用mockClear()，确保每个测试用例的dispatch调用记录都是独立的，不会被之前的测试干扰。

如果不用Jest的mock（比如用Chai断言库） #

如果你的项目里用的是Chai这类断言库，调整一下断言逻辑即可：

// 断言dispatch被调用一次
expect(store.dispatch.calledOnce).to.be.true;
// 断言传入的action正确
expect(store.dispatch.calledWith({
  type: 'SET_NOTIFICATION_DIALOG',
  status: '200',
  message: testMessage,
  model: 'LOADING'
})).to.be.true;

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