ReferenceError: ResizeObserver is not defined

Question

I am writing tests using Jest for component which used chart.js to create a line chart. I am getting below error when I am running the tests.

  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 is being used internally by the chart.js and i am not using explicitly anywhere. Does any one have a solution for this?

Razvan Dragos · Accepted Answer · 2021-08-06T10:46:09.927

Are you using the use-resize-observer (https://www.npmjs.com/package/use-resize-observer) library or the resize-observer hook (https://www.npmjs.com/package/@react-hook/resize-observer)?

If your test is failing on a component using use-resize-observer library, you need to mock the service in your test file (if you're using React):

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

I see that you use Angular, so this post should be useful: 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 ...
});

Arnold Gandarillas · Answer 2 · 2023-08-30T20:54:50.527

If you're encountering an error message like "ReferenceError: ResizeObserver is not defined" while running tests using vitest, react, and @headlessui/react, it's likely because ResizeObserver is not available in your test environment.

This error can be fixed by stubbing or mocking the ResizeObserver using vi.stubGlobal(). Below is an example on how to do this:

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

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

Here's what each line does:

const ResizeObserverMock = vi.fn(() => ({ ... }));: Creates a mock implementation of the ResizeObserver. The object returned by this function has observe, unobserve, and disconnect methods as empty functions. This is the minimum required for your tests to run without throwing a reference error.
vi.stubGlobal('ResizeObserver', ResizeObserverMock);: Stubs the global ResizeObserver object with the mock implementation. After this line, any code within your test that uses ResizeObserver will use this mocked version instead, thus resolving the "ResizeObserver is not defined" error.

You can place this code in your test setup file to make sure it's executed before your tests run.

Hope this helps! Happy testing!

ReferenceError: ResizeObserver is not defined

2 Answers2