如何用Jest测试点击按钮时带参数调用props函数的React函数组件

我明白你遇到的问题了——当onClick里是带参数的箭头函数调用时，原本的测试代码没检测到mock函数被触发。其实核心问题在于，我们需要确保事件触发后的异步更新被Jest正确捕获，同时还要验证函数是否传入了预期的参数。下面给你几种可行的解决方案：

方法一：用act包裹事件触发（适配Enzyme） #

Enzyme的simulate有时候需要配合React的act函数，确保所有组件更新和事件处理都完成后再进行断言。修改后的测试代码如下：

import { mount, act } from 'enzyme';
import Modal from './Modal';

describe('ModalComponent', () => {
  it('should call handleSave with "someInfo" when button is clicked', () => {
    const onSaveClickMock = jest.fn();
    const component = mount(<Modal handleSave={onSaveClickMock} />);
    const button = component.find('button');

    // 用act包裹点击操作，确保React处理完事件逻辑
    act(() => {
      button.simulate('click');
    });

    // 既验证函数被调用，也验证传入的参数是否正确
    expect(onSaveClickMock).toHaveBeenCalledTimes(1);
    expect(onSaveClickMock).toHaveBeenCalledWith('someInfo');
  });
});

方法二：直接触发原生DOM事件（更可靠） #

有时候Enzyme的simulate会有兼容性问题，直接操作DOM元素触发点击事件反而更稳定：

import { mount, act } from 'enzyme';
import Modal from './Modal';

describe('ModalComponent', () => {
  it('triggers handleSave with correct parameter on button click', () => {
    const onSaveClickMock = jest.fn();
    const component = mount(<Modal handleSave={onSaveClickMock} />);
    const buttonElement = component.find('button').getDOMNode();

    act(() => {
      buttonElement.click();
    });

    expect(onSaveClickMock).toHaveBeenCalledWith('someInfo');
  });
});

方法三：改用React Testing Library（推荐方案） #

如果可以的话，更推荐用React官方推荐的Testing Library来写测试，它更贴近用户真实操作，也不需要过多关心组件内部实现：

import { render, screen, fireEvent } from '@testing-library/react';
import Modal from './Modal';

describe('ModalComponent', () => {
  it('calls handleSave with "someInfo" when Save button is clicked', () => {
    const onSaveClickMock = jest.fn();
    render(<Modal handleSave={onSaveClickMock} />);

    // 根据按钮文本找到元素，模拟用户点击
    const saveButton = screen.getByText('Save');
    fireEvent.click(saveButton);

    expect(onSaveClickMock).toHaveBeenCalledWith('someInfo');
  });
});

为什么原来的测试会失败？ #

主要原因可能是没有用act包裹事件触发，导致React还没完成事件处理和状态更新，Jest就提前进行了断言，所以没捕获到mock函数的调用。另外，添加参数断言能确保你的组件不仅调用了函数，还传入了正确的参数，这比单纯验证函数被调用更有意义。

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