如何用Jest正确断言React组件中点击函数的调用？

你的测试失败核心原因是：测试代码里创建的handleClick mock函数和组件内部的handleClick完全是两个独立的函数，组件点击按钮时调用的是自身内部定义的函数，根本没用到你测试里的mock，所以会出现调用次数为0的报错。

下面提供两种可行的解决方式：

方式一：将点击函数改为组件props（推荐） #

这种方式让组件更具复用性，也便于测试时传入mock函数：

修改组件代码：

import React from 'react';

export default function MyComponent({ handleClick }) {
  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

对应的测试代码：

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

describe('MyComponent', () => {
  it('calls handleClick when button is clicked', () => {
    // 准备mock函数
    const mockHandleClick = jest.fn();
    // 渲染组件时传入mock函数作为props
    render(<MyComponent handleClick={mockHandleClick} />);
    const button = screen.getByRole('button');

    // 触发点击
    fireEvent.click(button);

    // 断言mock函数被调用
    expect(mockHandleClick).toHaveBeenCalled();
  });
});

方式二：测试组件的行为而非直接检测函数调用 #

如果不想修改组件结构，可以通过验证组件的输出行为（比如console.log的内容）来间接测试点击逻辑：

测试代码修改：

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

describe('MyComponent', () => {
  it('triggers the expected click behavior', () => {
    // 替换console.log为mock函数
    console.log = jest.fn();
    render(<MyComponent />);
    const button = screen.getByRole('button');

    // 触发点击
    fireEvent.click(button);

    // 断言console.log被调用并传入正确参数
    expect(console.log).toHaveBeenCalledWith('Clicking');
  });
});

为什么原测试会失败？ #

你在测试里声明的const handleClick = jest.fn()是测试作用域内的局部变量，和组件内部定义的handleClick没有任何关联。组件的按钮绑定的是自身内部的函数，测试代码无法直接访问或替换这个私有函数，所以点击后测试里的mock函数永远不会被调用。

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