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();
});
});
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);
});
});
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
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')
I've added to setupTests.js/ts next code:
global.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
unobserve: jest.fn(),
disconnect: jest.fn(),
}))