use-resize-observer: "ResizeObserver is not defined" error when running Jest

adding this line of code in the testing file fixed the error for me global.ResizeObserver = require(‘resize-observer-polyfill’)

I managed to bypass the issue like that.

import React from 'react';

import { render, fireEvent } from '@testing-library/react';

import { AuthProvider } from '../context/AuthProvider';
import LoginPage from './LoginPage';

const pass = 'pass';
const user = 'user';
class ResizeObserver {
  observe() {}
  unobserve() {}
}
describe('loginpage ', () => {
  window.ResizeObserver = ResizeObserver;
  test('should update username and password', async () => {
    const { findByPlaceholderText } = render(
      <AuthProvider>
        <LoginPage />
      </AuthProvider>,
    );
    const username = await findByPlaceholderText('Your username...');
    const password = await findByPlaceholderText('Password...');
    fireEvent.change(username, { target: { value: user } });
    fireEvent.change(password, { target: { value: pass } });
    expect(username.value).toBe(user);
    expect(password.value).toBe(pass);
  });
});

adding this line of code in the testing file fixed the error for me global.ResizeObserver = require(‘resize-observer-polyfill’)

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

Solution for vitest write in the file with the test at the highest level of nesting

const ResizeObserverMock = vi.fn(() => ({
  observe: vi.fn(),
  unobserve: vi.fn(),
  disconnect: vi.fn()
}))

vi.stubGlobal('ResizeObserver', ResizeObserverMock)

In case it helps someone, I found that you can mock module to use polyfilled when in tests with a few lines. This will at least get around the undefined error. It won’t add any functionality tho.

jest.mock('use-resize-observer', () => {
  return jest.requireActual('use-resize-observer/polyfilled');
});

I work on a component library where we use the hook to enhance component functionality behind a prop. So if hasResize=false, we don’t use the values provided from the hook. The library does not provide a polyfill for the same reasons you list in the readme.

The hook can’t be placed behind a browser support conditional - so even when hasResize=false is false, the hook throws an error in environments where RO is not supported. This effectively requires our consumers to provide an RO polyfill when they may not even have configured props to use the hook.

The only solution for us is to have two components, Component and ComponentWithResize. Render one or the other depending on prop and support.

A check for RO support in the hook would be very inexpensive and fix these issues.

global.ResizeObserver = class { observe() {} unobserve() {} disconnect() {} }; This code solved my issue

For those looking for a more configurable solution, the below worked for me:

jest.config.js

module.exports = {
  moduleNameMapper: {
    'use-resize-observer': 'use-resize-observer/polyfilled'
  }
};

I managed to bypass the issue like that.

import React from 'react';

import { render, fireEvent } from '@testing-library/react';

import { AuthProvider } from '../context/AuthProvider';
import LoginPage from './LoginPage';

const pass = 'pass';
const user = 'user';
class ResizeObserver {
  observe() {}
  unobserve() {}
}
describe('loginpage ', () => {
  window.ResizeObserver = ResizeObserver;
  test('should update username and password', async () => {
    const { findByPlaceholderText } = render(
      <AuthProvider>
        <LoginPage />
      </AuthProvider>,
    );
    const username = await findByPlaceholderText('Your username...');
    const password = await findByPlaceholderText('Password...');
    fireEvent.change(username, { target: { value: user } });
    fireEvent.change(password, { target: { value: pass } });
    expect(username.value).toBe(user);
    expect(password.value).toBe(pass);
  });
});

Hi, I was getting “please install a polyfill for ResizeObserver” after migrating jest26 to jest28 version in angular application. We are not using ResizeObserver in our application but I am not sure whether any dependency with NGXCHARTS, So I was getting this error suddenly.

I have tried above solution of bypassing, it worked thank you.

class ResizeObserver { observe() {} unobserve() {} disconnect() {} }

describe(‘Component’, () => { window.ResizeObserver = ResizeObserver; })

I used polyfilled version, import useResizeObserver from "use-resize-observer/polyfilled"; because of issues in IOs 12. Maybe this will help.

I added a test to #42, it should be ready to go.