Jest测试中无法覆盖FunctionHeader组件onClick回调代码求助

你当前的测试仅验证了组件渲染，未覆盖点击触发() => setActive(!active)的逻辑，核心问题是测试时未传入组件必需的active和setActive props，也未模拟点击操作并验证回调行为。

修改后的测试代码 #

import { mount } from 'enzyme';
import FunctionHeader from './FunctionHeader';

describe("Test FunctionHeader", () => {
  it("renders and triggers click callback correctly", () => {
    // 模拟setActive函数与初始active状态
    const mockSetActive = jest.fn();
    const initialActive = false;

    const wrapper = mount(
      <FunctionHeader active={initialActive} setActive={mockSetActive}>
        <div>test</div>
      </FunctionHeader>
    );
    
    // 基础渲染验证
    expect(wrapper.length).toEqual(1);

    // 模拟点击组件容器
    wrapper.find('FunctionHeaderStyled').simulate('click');
    
    // 验证setActive被调用，参数为初始active的取反值
    expect(mockSetActive).toHaveBeenCalledWith(true);

    // 二次点击验证状态反转逻辑
    wrapper.setProps({ active: true });
    wrapper.find('FunctionHeaderStyled').simulate('click');
    expect(mockSetActive).toHaveBeenCalledWith(false);
  });
});

关键说明 #

• 补充必需Props：用jest.fn()创建模拟的setActive函数，同时传入初始active值，确保组件能正常接收参数并执行逻辑。
• 触发点击事件：通过simulate('click')触发组件容器的点击行为，直接触发目标回调函数。
• 验证回调逻辑：检查mockSetActive的调用参数是否符合预期（当前active状态的取反值），确保状态反转逻辑正确执行。

若测试环境中无法直接定位FunctionHeaderStyled，可直接调用wrapper.simulate('click')，因为组件根元素即为FunctionHeaderStyled。

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