[test] Do not require ResizeObserver mock in JSDOM

[cherniavskii]

TODO:

• rebase on master

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8961--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	687.1	1,184.4	687.1	899.28	182.248
Sort 100k rows	ms	698.5	1,302	1,182.6	1,069.8	203.487
Select 100k rows	ms	246.4	394.1	286.2	296.16	51.133
Deselect 100k rows	ms	172.5	371.6	217.3	252.6	82.157

Generated by 🚫 dangerJS against 8695c6a

[m4theushw]

We already have this code in

mui-x/packages/grid/x-data-grid/src/components/base/GridBody.tsx

Lines 83 to 84 in 032349c

	useEnhancedEffect(() => {
	apiRef.current.computeSizeAndPublishResizeEvent();

Investigating more the bug I found the root problem. First, computeSizeAndPublishResizeEvent depends on the value of rootElementRef. By the time the effect above runs, in a test environment, this ref has not been set yet so it cannot store the dimensions. Consequentially, nothing is rendered and the test fails.

rootElementRef is set in

mui-x/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx

Line 73 in 032349c

apiRef.current.register('public', { rootElementRef: rootContainerRef });

which means that only in the 2nd render its value will be available. The effect that calls computeSizeAndPublishResizeEvent runs in between the 1st and 2nd render. Mocking ResizeObserver is a hacky way to call computeSizeAndPublishResizeEvent again, and hopefully have the ref available this time. I suspect we didn't face this problem in our tests because of StrictMode.

I have an alternative solution in #8963. My solution bases on using inside the effect only the refs created in GridBody. When the effect runs we know for sure that all refs are available, so I pass the main element as an argument of computeSizeAndPublishResizeEvent, nothing of registering the ref in the API, which requires a 2nd render to work correctly. I tested with your test repo and it worked.

[cherniavskii]

I suspect we didn't face this problem in our tests because of StrictMode.

Yes, I can confirm this.
We don't have a global ResizeObserver mock and strict mode is the only reason the tests pass without it since useLayoutEffect runs twice