使用Jest和Enzyme测试组件时this及事件回调阻塞代码覆盖率问题

问题根源很明确：你只是渲染了组件，但没有触发对应的事件来执行回调函数——覆盖率统计的是实际运行过的代码，这些箭头函数里的逻辑只有在事件触发时才会执行，所以必须在测试中主动模拟事件。

以下是具体解决步骤和测试代码：

1. 触发Input的onChange事件，执行searchCallback #

找到Input组件，模拟change事件并传入测试值，触发回调里的this.searchCallback(value)：

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

test('Input onChange triggers searchCallback', () => {
  // 模拟searchCallback方法，方便断言调用情况
  const mockSearchCallback = jest.spyOn(YourComponent.prototype, 'searchCallback');
  const wrapper = mount(<YourComponent />);
  
  // 找到Input组件并触发change事件
  const input = wrapper.find('Input');
  input.simulate('change', 'test-search-value');
  
  // 断言searchCallback被正确调用
  expect(mockSearchCallback).toHaveBeenCalledWith('test-search-value');
});

2. 触发Button的onClick事件，执行window.open #

模拟Button的click事件，同时mockwindow.open避免实际打开外部链接，还能验证调用逻辑：

test('Button onClick triggers window.open', () => {
  // 替换window.open为jest mock函数
  window.open = jest.fn();
  const wrapper = mount(<YourComponent />);
  
  // 找到Button组件并触发click事件
  const button = wrapper.find('Button');
  button.simulate('click');
  
  // 断言window.open被传入正确参数调用
  expect(window.open).toHaveBeenCalledWith('https://somurl');
});

额外注意事项 #

• 如果你的Input/Button是自定义组件（非原生HTML元素），需要确认组件是否把onChange/onClick传递给了内部的原生DOM元素。如果没有，可能需要直接找到内部的原生元素（比如wrapper.find('input')或wrapper.find('button')）来模拟事件。
• 确保searchCallback是组件的实例方法，且this绑定正确（比如用箭头函数定义方法，或在构造器中执行this.searchCallback = this.searchCallback.bind(this)）。

内容的提问来源于stack exchange，提问作者C.Aglar