使用Jest测试Shadcn Input-OTP组件时遇ResizeObserver未定义问题

问题背景 #

使用Shadcn Input-OTP组件构建OTP页面后，Jest测试出现连续错误：

• 初始错误：ReferenceError: ResizeObserver is not defined
• 模拟ResizeObserver后新错误：TypeError: _.observe is not a function

正确的ResizeObserver全局模拟方案 #

之前的模拟可能未完整实现ResizeObserver的必要方法，导致后续报错。在Jest的全局配置文件（比如jest.setup.js或src/setupTests.js）中添加完整模拟：

global.ResizeObserver = class ResizeObserver {
  constructor(callback) {
    this.callback = callback;
  }

  observe(target) {
    // 模拟触发回调，避免组件等待尺寸变化
    this.callback([{
      target,
      contentRect: {
        width: target.offsetWidth,
        height: target.offsetHeight,
        top: 0,
        left: 0,
        bottom: target.offsetHeight,
        right: target.offsetWidth,
        x: 0,
        y: 0
      }
    }]);
  }

  unobserve() {}
  disconnect() {}
};

针对_.observe错误的补充处理 #

如果上述模拟后仍出现该错误，大概率是组件内部依赖的Radix UI相关模块在测试环境中未被正确处理。可在测试文件顶部添加局部模拟：

jest.mock('@radix-ui/react-slot', () => ({
  __esModule: true,
  default: ({ children }) => children,
}));

单个测试文件的临时修复（可选） #

若全局配置不便修改，也可在单个测试文件中直接定义全局ResizeObserver：

beforeAll(() => {
  global.ResizeObserver = class {
    constructor() {}
    observe() {}
    unobserve() {}
    disconnect() {}
  };
});

注：完整实现observe并触发回调能让组件渲染更贴近真实环境，避免因等待尺寸变化导致的渲染异常。

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