ReferenceError：ResizeObserver 未定义

Question

我正在使用 Jest 为使用 Chart.js 创建折线图的组件编写测试。当我运行测试时，出现以下错误。

ReferenceError：ResizeObserver 未定义

  290 |   }
  291 |   ngAfterViewInit() {
> 292 |     this.chart = new Chart(this.chartRef.nativeElement, this.chartConfig);
      |                  ^
  293 |   }
  294 |
  295 |   ngOnInit() {

  at createResizeObserver (../../../node_modules/chart.js/dist/chart.js:2428:20)
  at DomPlatform.addEventListener (../../../node_modules/chart.js/dist/chart.js:2502:21)
  at _add (../../../node_modules/chart.js/dist/chart.js:7051:16)
  at attached (../../../node_modules/chart.js/dist/chart.js:7070:7)
  at Chart.bindResponsiveEvents (../../../node_modules/chart.js/dist/chart.js:7079:7)
  at Chart.bindEvents (../../../node_modules/chart.js/dist/chart.js:7023:12)
  at Chart._initialize (../../../node_modules/chart.js/dist/chart.js:6547:8)
  at new Chart (../../../node_modules/chart.js/dist/chart.js:6512:8)

ResizeObserver 正在由 Chart.js 内部使用，我没有在任何地方明确使用。有人对此有解决方案吗？

Answer 1

您使用的是use-resize-observer（https://www.npmjs.com/package/use-resize-observer）库还是resize-observer钩子（https://www.npmjs.com/package/@react-hook/resize-observer）？

如果您的测试在使用库的组件上失败use-resize-observer，您需要在测试文件中模拟该服务（如果您使用的是 React）：

jest.mock('use-resize-observer', () => ({
  __esModule: true,
  default: jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
  })),
}));

我看到你使用 Angular，所以这篇文章应该有用：Angular11 test: ReferenceError: ResizeObserver is not Defined

window.ResizeObserver =
    window.ResizeObserver ||
    jest.fn().mockImplementation(() => ({
        disconnect: jest.fn(),
        observe: jest.fn(),
        unobserve: jest.fn(),
    }));

describe('', () => {
  // test ...
});

Answer 2

如果您在使用vitest、React和@headlessui/react运行测试时遇到类似“ReferenceError: ResizeObserver is not Defined”的错误消息，很可能是因为 ResizeObserver 在您的测试环境中不可用。

可以通过使用vi.stubGlobal()存根或模拟ResizeObserver来修复此错误。以下是如何执行此操作的示例：

// Mock the ResizeObserver
const ResizeObserverMock = vi.fn(() => ({
  observe: vi.fn(),
  unobserve: vi.fn(),
  disconnect: vi.fn(),
}));

// Stub the global ResizeObserver
vi.stubGlobal('ResizeObserver', ResizeObserverMock);

以下是每行的作用：

1. const ResizeObserverMock = vi.fn(() => ({ ... }));：创建 ResizeObserver 的模拟实现。该函数返回的对象具有作为空函数的observe、uno​​bserve 和disconnect 方法。这是运行测试而不引发引用错误所需的最低限度。

2. vi.stubGlobal('ResizeObserver', ResizeObserverMock);：使用模拟实现对全局 ResizeObserver 对象进行存根。在此行之后，测试中使用 ResizeObserver 的任何代码都将使用此模拟版本，从而解决“ResizeObserver 未定义”错误。

您可以将此代码放入测试设置文件中，以确保它在测试运行之前执行。

希望这可以帮助！测试愉快！