ReferenceError：未定义 ResizeObserver答案

【问题标题】：ReferenceError: ResizeObserver is not definedReferenceError：未定义 ResizeObserver
【发布时间】：2021-10-11 06:06:12
【问题描述】：

我正在使用 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 内部使用，我没有在任何地方明确使用。有人对此有解决方案吗？

【问题讨论】：

标签： angular jestjs

【解决方案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 ...
});

【讨论】：