时间戳

首页 > 解决方案 > ReferenceError：未定义 ResizeObserver

angular - ReferenceError：未定义 ResizeObserver

问题描述

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

标签： angularjestjs

解决方案

您使用的是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 ...
});

推荐阅读