[data grid] Tests fail with: "IntersectionObserver is not defined" after upgrading to x-data-grid v7.3.2

[sorinpav]

Steps to reproduce

No response

Current behavior

The React project works fine, as far as I can see. I can't say that about the React Testing Library tests as well. When running the previously passing x-data-grid-premium tests, now we get errors about:

    ReferenceError: IntersectionObserver is not defined

      at node_modules/@mui/x-data-grid-pro/hooks/features/infiniteLoader/useGridInfiniteLoader.js:61:28
      at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:23150:26)
      at commitPassiveMountOnFiber (node_modules/react-dom/cjs/react-dom.development.js:24931:11)
      at commitPassiveMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24891:9)
      at commitPassiveMountEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24878:7)
      at commitPassiveMountEffects (node_modules/react-dom/cjs/react-dom.development.js:24866:3)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:27039:3)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:26984:14)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26935:5)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:26117:3)
      at flushSyncCallbacks (node_modules/react-dom/cjs/react-dom.development.js:12042:22)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26959:3)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
      at finishConcurrentRender (node_modules/react-dom/cjs/react-dom.development.js:25981:9)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25809:7)
      at workLoop (node_modules/scheduler/cjs/scheduler.development.js:266:34)
      at flushWork (node_modules/scheduler/cjs/scheduler.development.js:239:14)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:533:21)
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)

Note: We do not directly use IntersectionObserver in our codebase at all. It is complaining about the IntersectionObserver used inside useGridInfiniteLoader.js, which is coming directly from the data grid package. If I was to have a guess, I would think there's a polyfill that's missing after the upgrade...?

Expected behavior

Tests should pass - React project is working as expected, so tests should pass as well.

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (123.0.2420.97) npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.29 @mui/core-downloads-tracker: 5.15.16 @mui/icons-material: ^5.15.1 => 5.15.2 @mui/lab: ^5.0.0-alpha.157 => 5.0.0-alpha.158 @mui/material: ^5.15.16 => 5.15.16 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: ^7.3.2 => 7.3.2 @mui/x-data-grid-premium: ^7.3.2 => 7.3.2 @mui/x-data-grid-pro: 7.3.2 @mui/x-date-pickers: ^5.0.15 => 5.0.20 @mui/x-license: 7.2.0 @types/react: 17.0.3 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.4.5 => 5.4.5 ```

Testing library used:

``` We use React Testing Library: "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", ``` **Search keywords**: IntersectionObserver **Order ID**: 77486

[oliviertassinari]

@sorinpav Which version was it working for you?

[sorinpav]

Hi @oliviertassinari! Thanks for answering :).

I upgraded the following packages:

• @mui/material - ^5.15.1 to ^5.15.16
• @mui/x-data-grid - ^6.18.5 to ^7.3.2
• @mui/x-data-grid-premium - ^6.18.5 to ^7.3.2

Tests were all working pre-upgrade.

Hope this helps. Let me know if you need anything more from me, thanks!

[oliviertassinari]

I see #8672 as the origin of this issue. It's pretty much the same as #1151.

It seems that we have a few options:

1. We make this work outside of the box, we feature detect https://github.com/search?q=org%3Amui+%22typeof+IntersectionObserver+%21%3D%3D+%27undefined%27%22&type=code. So do like Material UI, which feature detect IntersectionObserver but maybe it's weird it's soon going to be in Material UI v6 range of browser support.
2. We create a helper that developers can call in their test environment, it will install the needed polyfill. We create docs for it.
3. We let developers do the setup on their own, with code people can copy on our docs.
4. We pray and hope IntersectionObserver gets supported in jsdom: https://github.com/jsdom/jsdom/issues/2032. https://github.com/capricorn86/happy-dom doesn't seem to have support for IntersectionObserver either.

I would vote for Option 1. This seems to be the most pragmatic, it's not pure but it's very effective.

[sorinpav]

I see - thanks for investigating this. Not quite the gotcha I was expecting. I had hoped that it's something easier to solve. I'll leave this open to see if anyone comes up with a better solution.

[michelengelen]

@oliviertassinari gentle ping on the above ☝🏼

[oliviertassinari]

I don't quite understand your first suggestion, could you please expand on that?

https://github.com/mui/material-ui/blob/2cd2c1f18facbabf1e8b0a4bbb0de80ac98c7d96/packages/mui-material/src/Tabs/Tabs.js#L681 makes sense to me, until jsdom supports it. I mean, who would want to test this in jsdom in the first place?

[sorinpav]

@oliviertassinari thanks! Earliest I can test if that would be working is on Tuesday. I'll report back here.

[oliviertassinari]

Actually, it's also related to https://github.com/mui/mui-x/issues/1151. Having it work outside of the box, is one approach. Another is to have developers setup polyfills in their environment.

[sorinpav]

Apologies, did not get around to trying this out yet. I will try soon. However, what I'm about to try is only a workaround technically, so I would say this issue should stay open until a proper solution is advised. Thanks!

[teonaandreea]

Adding a jest mock for IntersectionObserver in the tests that are failing has fixed the error in my case

beforeEach(() => {
    const mockIntersectionObserver = jest.fn();
    mockIntersectionObserver.mockReturnValue({
        observe: () => null,
        unobserve: () => null,
        disconnect: () => null,
    });
    window.IntersectionObserver = mockIntersectionObserver;
});