search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.91k stars 1.19k forks source link

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

Open sorinpav opened 1 month ago

sorinpav commented 1 month ago

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 commented 1 month ago

@sorinpav Which version was it working for you?

sorinpav commented 1 month ago

Hi @oliviertassinari! Thanks for answering :).

I upgraded the following packages:

Tests were all working pre-upgrade.

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

oliviertassinari commented 1 month ago

I see #8672 as the origin. I would connect this issue to #1151.

As for the solution, I don't have a specific recommendation on the best way forward. Ideas:

sorinpav commented 1 month ago

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. @oliviertassinari I don't quite understand your first suggestion, could you please expand on that? Thanks!

michelengelen commented 1 month ago

@oliviertassinari gentle ping on the above ☝🏼

oliviertassinari commented 1 month ago

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 commented 1 month ago

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

oliviertassinari commented 4 weeks ago

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 commented 2 weeks ago

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!