Jest测试React组件onClick事件覆盖率不达标如何解决

AI 小北

2026-10-7

问题原因

你现有的测试仅验证了关闭按钮元素是否存在，从未模拟触发点击操作，onClick绑定的匿名回调函数没有执行过，因此这部分代码不会被覆盖率统计命中，拉低了整体覆盖率。
你第三个测试用例中给closeRightSection传入了空值，就算触发点击也会执行报错，无法正常验证回调逻辑。

解决方法

你需要新增测试用例模拟用户点击操作，配合Jest的Mock函数验证回调触发逻辑即可覆盖对应代码：

修改后的完整测试代码

import React from 'react'
import { render, fireEvent } from "@testing-library/react";
import HeaderCreate from '../components/createHeader';

test("render header correctly", () => {
    const { getByTestId } = render(<HeaderCreate name="My Name is Test"></HeaderCreate>);
    expect(getByTestId('header').textContent).toBe('My Name is Test')
});

test("render Description Paragraph correctly", () => {
    const { getByTestId } = render(<HeaderCreate description="Hi I am Description box"></HeaderCreate>);
    expect(getByTestId('description-para').textContent).toBe('Hi I am Description box')
});

test("render close tooltip and trigger click correctly", () => {
    const mockClose = jest.fn();
    const { getByTestId } = render(<HeaderCreate closeRightSection={mockClose}></HeaderCreate>);
    // 验证按钮存在
    expect(getByTestId('id')).toBeTruthy();
    // 模拟点击关闭按钮
    fireEvent.click(getByTestId('id'));
    // 验证回调函数被正常调用
    expect(mockClose).toHaveBeenCalledTimes(1);
});