如何使用Jest测试React按钮点击触发的回调函数并实现100%测试覆盖率

前置依赖 #

首先确保你已经安装了以下测试工具：

• @testing-library/react：提供React组件渲染、DOM查询能力
• @testing-library/jest-dom：提供DOM相关断言扩展
• @testing-library/user-event：提供用户交互模拟能力

提示：原Banner组件中用到的argument.READ未显式引入也未作为props传入，实际运行会报错，建议先修复该问题再执行测试。

1. Banner子组件单元测试 #

该部分测试覆盖Banner的渲染逻辑、点击触发回调的逻辑，可实现子组件100%行覆盖率：

import { render, screen, fireEvent } from '@testing-library/react';
import { Banner } from './Banner';
// 替换为你实际的Argument枚举导入路径
import { Argument } from './constant';

describe('Banner组件', () => {
  it('点击Discard按钮时，正确触发argumentSetter并传入Argument.READ参数', () => {
    // 创建模拟回调函数
    const mockArgumentSetter = jest.fn();
    // 渲染Banner组件，传入模拟props
    render(<Banner argumentSetter={mockArgumentSetter} />);
    // 定位Discard按钮
    const discardButton = screen.getByRole('button', { name: /discard/i });
    // 模拟点击按钮
    fireEvent.click(discardButton);
    // 断言回调触发符合预期
    expect(mockArgumentSetter).toHaveBeenCalledTimes(1);
    expect(mockArgumentSetter).toHaveBeenCalledWith(Argument.READ);
  });
});

如果你的Button、Icon是第三方UI库组件，需要在jest配置中模拟这些组件避免测试报错，在jest.setup.js中添加如下配置：

// 替换为你实际使用的UI库导入路径
jest.mock('antd', () => ({
  ...jest.requireActual('antd'),
  Button: ({ children, onClick }) => <button onClick={onClick}>{children}</button>,
  Icon: ({ children }) => <span>{children}</span>
}));

2. 父组件集成测试 #

该部分测试覆盖父组件状态更新逻辑、useCallback依赖逻辑，可实现父组件相关代码100%行覆盖率：

import { render, screen, fireEvent } from '@testing-library/react';
// 替换为你实际的父组件导入路径
import ParentComponent from './Parent';
import { Argument } from './constant';

describe('父组件', () => {
  it('接收Banner传递的参数后，正确更新argument状态', () => {
    render(<ParentComponent />);
    const discardButton = screen.getByRole('button', { name: /discard/i });
    fireEvent.click(discardButton);
    
    // 替换为你父组件根据argument状态渲染的对应特征，比如状态为READ时展示的提示文本
    expect(screen.getByText(/只读模式/i)).toBeInTheDocument();
    // 如果父组件没有展示状态的UI，可以用spyOn监听setArgument调用验证
  });

  it('useCallback依赖配置正确，仅当argument变化时回调引用更新', () => {
    const { rerender } = render(<ParentComponent />);
    const firstCallback = screen.getByRole('button', { name: /discard/i }).onClick;
    // 触发状态更新
    fireEvent.click(screen.getByRole('button', { name: /discard/i }));
    rerender(<ParentComponent />);
    const secondCallback = screen.getByRole('button', { name: /discard/i }).onClick;
    // 状态变化后回调引用更新，符合useCallback依赖逻辑
    expect(firstCallback).not.toBe(secondCallback);
  });
});

覆盖率查看 #

执行测试时添加--coverage参数即可生成覆盖率报告：

jest --coverage

上述用例已经覆盖了所有业务逻辑：Banner的点击逻辑、回调传参逻辑、父组件状态更新逻辑、useCallback依赖逻辑，可实现100%测试覆盖率。

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