How to mock ResizeObserver to work in unit tests using react testing library

Question

If anyone can help, I have a custom hook that uses ResizeObserver to change the width of a component. My problem is that when I go to run my units test it breaks all my tests and looking at the snapshot it is not rendering all the elements in the dom. It was working before until I implemented the ResizeObserver. Does anyone know if there is a way I jest.mock the ResizeObserver to not undefined. Or other suggestions.

import * as React from 'react';
import ResizeObserver from 'resize-observer-polyfill';

const useResizeObserver = (ref: { current: any }) => {
    const [dimensions, setDimensions] = React.useState<DOMRectReadOnly>();
    React.useEffect(() => {
        const observeTarget = ref.current;
        const resizeObserver = new ResizeObserver((entries) => {
            entries.forEach((entry) => {
                setDimensions(entry.contentRect);
            });
        });
        resizeObserver.observe(observeTarget);
        return () => {
            resizeObserver.unobserve(observeTarget);
        };
    }, [ref]);
    return dimensions;
};

export default useResizeObserver;



import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';

import mockFetchProfileActivity from '../../../services/mocks/fetch-profile-activity';
import BarChart from './BarChart';

const component = <BarChart userActivity={mockFetchProfileActivity} />;

describe('Render barElement Chart component', () => {
    const observers: any[] = [];
    let resizeHandler: (observers: any[]) => void;
    (window as any).ResizeObserver = (e: any) => {
        resizeHandler = e;

        return {
            observe(element: any) {
                observers.push(element);
            },
            unobserve(element: any) {
                const i = observers.indexOf(element);
                if (i !== -1) {
                    observers.splice(i, 1);
                }
            }
        };
    };

    it('Matches the snapshot', () => {
        // resizeHandler(observers);
        const container = render(component);
        expect(container).toMatchSnapshot();
    });

    it('when clicking on a chart barElement drilldown "challenges" are shown', async () => {
        // arrange
        const componentRender = render(component);
        waitFor(() => resizeHandler(observers));

        // act
        const barElement = componentRender.container.querySelector('svg rect');

        if (barElement) userEvent.click(barElement);

        // assert
        expect(screen.getByText('Challenge 1')).toBeInTheDocument();
    });
});

score 28 · Answer 1 · answered Apr 08 '21 at 15:05

28

I chose to add the polyfill as a dev dependency and add the following line to setupTests.js/ts:

global.ResizeObserver = require('resize-observer-polyfill')

answered Apr 08 '21 at 15:05

PJRobot

906
11
14

3

Very slick, and worked perfectly. I like it! To get your types to match up nicely, swap it out for the `import` equivalent, and assign it in the next line. – Geoff Davids Apr 12 '21 at 01:58
1

Nice! I had to do `window.ResizeObserver = require...` but then it worked without an issue. – Alex Wally Oct 12 '21 at 21:16
Simplest solution by far, this worked for my monorepo powered by nx.dev. I did have to add into my jest.preset.js configuration (setupFilesAfterDev option with the value being the location to setupTests.js) as nx doesn't create setupTests.js file by default. – user1383163 Apr 18 '22 at 22:29
you made my day and my week!!! – Marc Monserrat Jun 03 '22 at 19:38

score 19 · Answer 2 · edited Mar 18 '22 at 10:37

19

Mock the ResizeObserver:

class ResizeObserver {
    observe() {
        // do nothing
    }
    unobserve() {
        // do nothing
    }
    disconnect() {
        // do nothing
    }
}

window.ResizeObserver = ResizeObserver;
export default ResizeObserver;

sample.test.js

import ResizeObserver from './__mocks__/ResizeObserver';
import module from 'sample';

describe('module', ()=> {
     it('returns an instance of ResizeObserver', () => {
           // do something that uses the resize observer
           // NOTE: The actual observe handler would not be called in jsdom anyway as no resize would be triggered.
           // e.g.
           expect(module.somethingThatReturnAReference to the resize observer).toBeInstanceOf(ResizeObserver);
        });
});

_source

edited Mar 18 '22 at 10:37

Max Yankov

11,341
11
62
126

answered Dec 01 '20 at 17:28

karel

4,637
41
42
47

And how I ca test what's going on in the resizeObserver callback? For example, I have some changes to an HTML element style, that I need to test. How? – Vladyn Feb 16 '21 at 10:25
Yeah, I'm still clueless of how to now test any of the logic inside the ResizeObserver :( – ChazUK Mar 03 '22 at 19:28

Silveste · Accepted Answer · 2021-04-06T12:21:55.297

6

I had similar issue using Create React App setup.

If that is your case, you can create a file in your root directory called setupTest.js and add the following code:

  import '@testing-library/jest-dom/extend-expect';
  import 'jest-extended';
    
  jest.mock('./hooks/useResizeObserver', () => () => ({
    __esModule: true,
    default: jest.fn().mockImplementation(() => ({
        observe: jest.fn(),
        unobserve: jest.fn(),
        disconnect: jest.fn(),
    })),
  }));

You can find more information to configure the test environment for Create React App here and the ResizeObserver API here

edited Apr 06 '21 at 12:21

answered Jan 01 '21 at 23:47

Silveste

120
2
9

That looks fine, the only problem is that I get an error, have you actually got this working this is the error I get. ```Property 'ResizeObserver' does not exist on type 'Global & typeof globalThis'``` – NiseNise Jan 04 '21 at 11:28
Hi, yes for me is working fine. If I remove the code I get this error `This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills`. Did you remove the polyfill? As with the code above you wouldn't need it. If that is the case maybe is a version issue. I am using react-scripts 4.0.0 – Silveste Jan 05 '21 at 11:47
Sorry just forgot to mention that the error that I'm getting (if I remove the resize observer mock) comes from a library that I am using in my project (@visx/tooltip). In your case the error might be different because you are using different libraries – Silveste Jan 05 '21 at 14:25
I am not using any libraries just a resizeObserver API in a custom hook, as not necessary to use a library. I am using react-scripts 4.0.1 but the error is more a typescript error, not a browser error. – NiseNise Jan 07 '21 at 16:09
Ups sorry, the solution proposed above only works in Javascript. I just found an answer that could help [here](https://stackoverflow.com/questions/40743131/how-to-prevent-property-does-not-exist-on-type-global-with-jsdom-and-t) What about if instead `global.ResizeObserver = resizeObserverMock;` you add `const globalAny:any = global; globalAny.ResizeObserver = resizeObserverMock;`. Let me know if that works and I'll edit my answer – Silveste Jan 11 '21 at 15:14

Ron Lavit · Answer 4 · 2022-01-14T00:08:55.337

5

I've added to setupTests.js/ts next code:

global.ResizeObserver = jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
}))

edited Jan 14 '22 at 00:08

answered Jan 14 '22 at 00:03

Ron Lavit

581
6
6

That worked for me in stencil js with jest testing. Thanks – Alex Doumas Jan 31 '22 at 07:39

How to mock ResizeObserver to work in unit tests using react testing library

4 Answers4

Linked