如何使用Jest/Enzyme测试ResizeObserver回调函数

Jest默认的jsdom运行环境没有提供原生ResizeObserver实现，也无法通过普通事件派发的方式触发ResizeObserver回调，直接通过Mock全局ResizeObserver的方式即可完成测试，步骤如下：

• 第一步：Mock全局ResizeObserver构造函数
  在测试文件顶部或者Jest全局setup文件中，替换全局的ResizeObserver实现，将实例方法、回调暴露出来方便测试时手动触发：

class MockResizeObserver {
  constructor(callback) {
    // 保存注册的回调函数，用于后续手动触发
    this.resizeCallback = callback;
  }
  observe = jest.fn();
  unobserve = jest.fn();
  disconnect = jest.fn();
  // 模拟尺寸变化，触发注册的回调
  triggerResize = (resizeParams) => {
    this.resizeCallback([
      {
        contentRect: {
          width: resizeParams.width,
          height: resizeParams.height,
          // 按需补全业务逻辑中用到的其他ResizeObserverEntry属性
        }
      }
    ]);
  }
}
// 挂载到全局替换原生实现
global.ResizeObserver = MockResizeObserver;

• 第二步：编写测试用例
  组件挂载后直接拿到实例上保存的resizeObserver对象，手动调用triggerResize模拟尺寸变化，再断言状态和渲染结果即可：

import { mount } from 'enzyme';
import TargetComponent from './component.tsx';

describe('组件ResizeObserver逻辑测试', () => {
  let wrapper;
  beforeEach(() => {
    jest.clearAllMocks();
    wrapper = mount(<TargetComponent />);
  });

  afterEach(() => {
    wrapper.unmount();
  });

  it('尺寸变化时会触发toggleStyles更新applyStyles状态', () => {
    const componentInstance = wrapper.instance();
    const observer = componentInstance.resizeObserver;

    // 验证组件挂载时已经正确注册监听
    expect(observer.observe).toHaveBeenCalledTimes(1);

    // 模拟满足样式应用条件的尺寸
    observer.triggerResize({ width: 1000, height: 600 });
    wrapper.update();
    expect(wrapper.state('applyStyles')).toBe(true);

    // 模拟不满足样式应用条件的尺寸
    observer.triggerResize({ width: 200, height: 100 });
    wrapper.update();
    expect(wrapper.state('applyStyles')).toBe(false);
  });

  it('组件卸载时会断开ResizeObserver监听', () => {
    const observer = wrapper.instance().resizeObserver;
    wrapper.unmount();
    expect(observer.disconnect).toHaveBeenCalledTimes(1);
  });
});

注意：ResizeObserver的触发逻辑和window.resize事件没有关联，不需要通过派发window.resize事件的方式尝试触发回调。如果业务逻辑中用到了borderBoxSize、contentBoxSize等其他ResizeObserverEntry属性，在triggerResize传入的参数中补全对应字段即可。

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