React测试遇ReferenceError: ResizeObserver is not defined，未自行使用该API求助

你遇到的问题是因为测试环境（如Jest）没有内置ResizeObserver API，而你用到的allotment库内部依赖了它，所以需要手动模拟或引入这个API。以下是几种可行的解决方法：

方法1：在单个测试文件中直接模拟 #

在你的测试文件顶部添加ResizeObserver的模拟实现：

import React from "react";
import Page from "../Page";
import { Provider } from "react-redux";
import { store } from "../../redux/store";
import { render } from '@testing-library/react'; // 确保导入render
import { MemoryRouter } from 'react-router-dom'; // 确保导入MemoryRouter

import "@testing-library/jest-dom/extend-expect";

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

  observe(target) {
    // 模拟触发回调，传入符合库预期的参数结构
    this.callback([{
      target,
      contentRect: { width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0 }
    }]);
  }

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

describe("Testing component Page", () => {
  const renderPage = () =>
    render(
      <Provider store={store}>
        <MemoryRouter>
          <Page />
        </MemoryRouter>
      </Provider>
    );

  test("Testing Page", () => {
    renderPage();
    // 这里可以添加断言，比如检查页面元素是否存在
    // expect(screen.getByText('某个文本')).toBeInTheDocument();
  });
});

方法2：全局模拟（适用于多个测试文件） #

如果多个测试都遇到这个问题，可以在Jest的全局配置文件中添加模拟：

1. 在项目根目录创建jest.setup.js文件，写入模拟代码：

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

  observe(target) {
    this.callback([{
      target,
      contentRect: { width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0 }
    }]);
  }

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

2. 在jest.config.js中配置这个文件为全局setup文件：

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
  // 其他Jest配置项...
};

方法3：使用polyfill包 #

安装resize-observer-polyfill作为依赖：

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

然后在测试文件或全局setup文件中导入并挂载到全局：

import ResizeObserver from 'resize-observer-polyfill';
global.ResizeObserver = ResizeObserver;

另外注意你的测试代码中，需要确保导入了render（来自@testing-library/react）和MemoryRouter（来自react-router-dom），否则会出现其他错误。

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