如何测试传给子组件的函数？Jest+Enzyme测试Resizable组件onResizeStop事件

针对你的场景，不需要模拟真实拖拽操作，直接调用Resizable组件的onResizeStop回调即可完成测试，同时覆盖未被测试的代码行。以下是具体步骤和代码：

测试思路 #

• 用Enzyme的mount方法挂载SomeComponent（需访问组件状态和子组件props）
• 从挂载实例中定位Resizable子组件
• 调用Resizable的onResizeStop props函数，传入所需参数
• 断言组件的height状态是否按预期更新

完整测试代码 #

import React from 'react';
import { mount } from 'enzyme';
import SomeComponent from './SomeComponent';
import Resizable from 're-resizable';

describe('SomeComponent', () => {
  it('updates height state when Resizable onResizeStop is triggered', () => {
    // 挂载组件
    const wrapper = mount(<SomeComponent />);
    
    // 获取Resizable组件实例
    const resizable = wrapper.find(Resizable);
    
    // 模拟回调所需参数：事件用jest模拟，direction传有效值，ref设为null，delta包含高度变化值
    const mockEvent = jest.fn();
    const mockDirection = 'bottom';
    const mockRef = null;
    const mockDelta = { height: 20 }; // 假设拖拽后高度增加20
    
    // 调用onResizeStop回调
    resizable.props().onResizeStop(mockEvent, mockDirection, mockRef, mockDelta);
    
    // 断言状态更新结果
    expect(wrapper.state('height')).toBe(20); // 初始0 + 20 = 20
  });
});

补充说明 #

• 我们只需要验证自己编写的回调逻辑是否正确，第三方组件Resizable的内部逻辑由其自身测试覆盖，因此直接调用回调是最高效的单元测试方式
• 执行该测试后，onResizeStop对应的代码行将被覆盖，解决你遇到的覆盖率问题

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