"ResizeObserver is not defined" error when running Jest

Hello 👋

Using useResizeObserver crashes my app’s tests. Jest uses JSDom, which apparently doesn’t support the ResizeObserver API.

I know we can detect when Jest is running, but React doesn’t support conditionally calling hooks, so I don’t know how to prevent Jest from crashing. I think the fix has to be done inside the hook.

Issue Analytics

State:
Created 3 years ago
Comments:14 (4 by maintainers)

Top GitHub Comments

42reactions

sawsanCScommented, Dec 10, 2021

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

12reactions

selonercommented, Jun 16, 2020

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);
  });
});