如何测试mapDispatchToProps函数是否被调用并传入参数？

你遇到的核心问题是：你手动传入的myFunction mock被Redux connect生成的函数覆盖了。因为你导出的是经过connect包装的组件，mapDispatchToProps会自动为组件注入myFunction prop，你手动传的mock根本不会生效，这就是测试始终失败的原因。

下面给你两种针对性的解决方案，按需选择：

方案一：测试未连接的原始组件（推荐用于单元测试） #

这种方式专注于测试组件本身的逻辑，不需要依赖Redux，更纯粹。

步骤1：修改Component.jsx，导出原始组件 #

在原代码中额外导出未被connect包装的组件：

const mapDispatchToProps = dispatch => ({
    myFunction: (data) => dispatch(myAction(data))
});

// 导出原始组件，用于测试
export const Component = ({buttonText, myFunction}) => (
    <button data-testid="test" onClick={() => myFunction(123)}>{buttonText}</button>
)

// 导出连接Redux的组件，用于业务代码
export default connect(null, mapDispatchToProps)(Component);

步骤2：修改Test.js，测试原始组件 #

直接导入未连接的组件，不需要Provider和store，直接传入mock函数：

import { Component } from './Component'; // 注意这里导入的是原始组件

it('Should pass', () => {
    const mockUpdate = jest.fn(data => console.log('HIT FUNCTION with ' + data));
    const props = {buttonText: 'Click me', myFunction: mockUpdate};

    render(<Component {...props}/>);

    userEvent.click(screen.queryByTestId('test'));

    expect(mockUpdate).toHaveBeenCalled();
    expect(mockUpdate).toHaveBeenCalledWith(123);
});

方案二：测试已连接组件，检查Store的Action #

如果你需要验证组件与Redux的连接逻辑是否正确，可以通过mockStore检查dispatch的Action是否符合预期：

修改Test.js代码 #

import createMockStore from "redux-mock-store";
import { myAction } from './Actions';

it('Should dispatch the correct action when button is clicked', () => {
    const mockStore = createMockStore();
    const store = mockStore({});

    render(
        <Provider store={store}>
            <Component buttonText="Click me"/>
        </Provider>
    );

    userEvent.click(screen.queryByTestId('test'));

    // 获取Store中所有被dispatch的Actions
    const dispatchedActions = store.getActions();
    
    // 验证Action是否正确
    expect(dispatchedActions).toEqual([myAction(123)]);
    // 也可以拆分验证细节
    expect(dispatchedActions[0].type).toBe('MY_ACTION');
    expect(dispatchedActions[0].agentData).toBe(123);
});

两种方案的适用场景 #

• 方案一：适合单元测试组件本身，只关心组件是否正确触发传入的回调，不涉及Redux逻辑。
• 方案二：适合测试组件与Redux的集成，确保组件能正确dispatch预期的Action。

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