Mock ResizeObserver in React Tests: A Step-by-Step Guide (2026)

Testing React components can become challenging when dealing with APIs that interact with the browser environment, such as the ResizeObserver. This tutorial will guide you through mocking ResizeObserver in your unit tests using the React Testing Library and Jest. Understanding how to effectively mock such features is crucial for ensuring your tests are both reliable and meaningful.

Key Takeaways

• Learn to mock ResizeObserver in Jest for reliable unit tests.
• Understand how to set up a test environment for React components using React Testing Library.
• Resolve issues where ResizeObserver might cause tests to fail.
• Gain insights into handling browser-specific APIs in a testing context.

In modern web applications, dynamically adjusting layout components using ResizeObserver is common. However, when it comes to unit testing, these browser-specific APIs can lead to failures if not correctly mocked. This tutorial will cover why mocking is necessary and provide a step-by-step guide to implementing it effectively in your testing strategy.

Prerequisites

• Basic understanding of React and JavaScript.
• Familiarity with Jest and React Testing Library.
• Node.js and npm installed on your machine.
• React project set up with create-react-app (or similar).

Step 1: Understand the Role of ResizeObserver

ResizeObserver is a JavaScript API that allows you to execute a function whenever an element's size changes. This is particularly useful for responsive design. However, in a testing environment, where the DOM does not naturally resize, you need to simulate these changes.

Step 2: Install Necessary Dependencies

Ensure you have react-testing-library and jest installed in your project:

npm install --save-dev @testing-library/react jest

These libraries will provide the testing environment and utilities needed to mock browser APIs.

Step 3: Set Up Jest for Testing

Include Jest in your project by adding a setup file. This file will configure Jest to mock ResizeObserver.

// jest.setup.js
window.ResizeObserver = class {
  constructor(callback) {
    this.callback = callback;
  }
  observe() {
    // Simulate observing changes
    this.callback([{ target: {}, contentRect: { width: 100, height: 100 } }]);
  }
  unobserve() {}
  disconnect() {}
};

In your package.json, ensure the setup file is loaded:

"jest": {
  "setupFilesAfterEnv": ["/jest.setup.js"]
}

Step 4: Write a Test for Your Component

Now, write a test for a React component that uses ResizeObserver. Consider a simple component that changes its background color based on its width:

import React from 'react';
import { render, screen } from '@testing-library/react';
import MyResponsiveComponent from './MyResponsiveComponent';

test('changes background color based on width', () => {
  render();
  const element = screen.getByTestId('responsive-element');
  expect(element).toHaveStyle('background-color: blue');
});

This test ensures that the component's background color changes as expected when the ResizeObserver callback is triggered.

Common Errors/Troubleshooting

Here are some common issues you might encounter when mocking ResizeObserver:

• Error: ResizeObserver is not a constructor: Ensure your setup file correctly mocks the ResizeObserver before any tests run.
• Test fails due to missing DOM elements: Check if your component renders correctly and that the mock provides the expected size data.

If you encounter any issues, verify that your Jest setup file is correctly configured and that the mock implementation accurately reflects the API's behavior.

Frequently Asked Questions

Why mock ResizeObserver in tests?

Mocking ResizeObserver allows you to simulate element resizing without needing a real browser environment, ensuring reliable test outcomes.

How does mocking help in React testing?

Mocking simulates external dependencies and APIs, enabling you to test component behavior in isolation.

What if my tests still fail?

Ensure your Jest setup file is loaded correctly and that the mock accurately reflects the ResizeObserver API. Adjust the mock as needed.