如何解决Vitest测试React组件时ResizeObserver未定义的问题

你遇到的问题根源是jsdom测试环境默认未提供ResizeObserver，以下是几个可行的解决思路：

1. 在全局测试setup中模拟ResizeObserver #

修改你的setup.ts文件，添加ResizeObserver的全局模拟实现：

import '@testing-library/jest-dom';
import { afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';

// 模拟ResizeObserver
global.ResizeObserver = class ResizeObserver {
  constructor(private callback: ResizeObserverCallback) {}

  observe(target: Element): void {
    // 如需触发尺寸变化回调，可在这里模拟传入参数
    this.callback([{ target, contentRect: { width: 0, height: 0 } } as ResizeObserverEntry], this);
  }

  unobserve(): void {}
  disconnect(): void {}
};

afterEach(() => {
  cleanup();
});

如果不需要模拟实际尺寸变化，也可以将方法简化为空实现，足够让use-resize-observer正常运行。

2. 使用ResizeObserver polyfill #

先安装polyfill包：

npm install resize-observer-polyfill --save-dev

然后在setup.ts顶部引入：

import 'resize-observer-polyfill';
import '@testing-library/jest-dom';
// 其余setup代码...

polyfill会自动在全局环境注入标准的ResizeObserver实现，完全模拟浏览器环境。

3. 升级Vitest及相关依赖 #

旧版本的jsdom（Vitest默认使用的测试环境）可能未内置ResizeObserver，尝试升级到最新版本：

npm update vitest jsdom

新版Vitest配套的jsdom通常已包含ResizeObserver支持，无需额外配置。

4. 单测试文件内局部模拟 #

如果不想全局修改，可以在单个测试文件中添加局部模拟：

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

it('', async () => {
  render(<MyTextInput />);
  // 测试逻辑...
});

内容的提问来源于stack exchange，提问作者Joseph Beuys' Mum