[data grid] Tests broken in JSDOM with v7.16.0

[ddolcimascolo]

Steps to reproduce

https://github.com/ddolcimascolo/mui-x-issue-14517

Current behavior

Tests fail with

SyntaxError: '+.MuiDataGrid-columnHeader:focus' is not a valid selector
❯ emit ../../node_modules/nwsapi/src/nwsapi.js:576:17
❯ _querySelectorAll ../../node_modules/nwsapi/src/nwsapi.js:1528:9
❯ Object._querySelector [as first] ../../node_modules/nwsapi/src/nwsapi.js:1437:14
❯ HTMLDivElementImpl.querySelector ../../node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:69:44
❯ HTMLDivElement.querySelector ../../node_modules/jsdom/lib/jsdom/living/generated/Element.js:1094:58
❯ Array.Resolver ../../node_modules/nwsapi/src/nwsapi.js:781:17
❯ match_assert ../../node_modules/nwsapi/src/nwsapi.js:1364:13
❯ Object._matches [as match] ../../node_modules/nwsapi/src/nwsapi.js:1382:16
❯ exports.matchesDontThrow ../../node_modules/jsdom/lib/jsdom/living/helpers/selectors.js:29:36
❯ matches ../../node_modules/jsdom/lib/jsdom/living/helpers/style-rules.js:172:10

Expected behavior

Tests pass

Context

Upgrading mui-x from v7.15.0 to v7.16.0 through a Renovate PR

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.8 Linux Mint 21.3 (Virginia)
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.12.1 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.119

Search keywords: jsdom tests broken
Order ID: 31461

[michelengelen]

@arminmeh could you have a look at this?

[cruessler]

Same here. I suspect this is related to this addition: https://github.com/mui/mui-x/pull/14293/files#diff-e1db53193a627d36d1cd3f651a954ee1e32ecb93caa020446631d722bb1be75cR293-R294.

[ddolcimascolo]

Hi @arminmeh @michelengelen

Premium customer here. Any news about the issue?

Thanks in advance.

Cheers,
David

[michelengelen]

I'll raise this in the team channel ... will let you know here with an update later today!

[arminmeh]

Hi all, I will take a look and update you soon

[arminmeh]

@cruessler was right
issue is related to the lines with a combination of :has() pseudo-class and a sibling selector.

There is one more below the provided selection
and two more added in a later PR

Issue occurs because of nwsapi which is being used by jsdom to validate selectors.

There is an issue opened to address this.

One of the options would be to replace these styles with the ones compatible with nwsapi, like these folks did.

@mui/xgrid any suggestions?

@KenanYusuf tagging you separately since you worked on this recently

[michelengelen]

adding this to the board for further tracking of it! 👍🏼

[ddolcimascolo]

Until you fix this, is there any workaround or should we wait for a new release?

[KenanYusuf]

Hi @ddolcimascolo, I plan to make a fix for this in time for the next release later this week.

I am not aware of any workarounds at the moment.

[ddolcimascolo]

Hi @ddolcimascolo, I plan to make a fix for this in time for the next release later this week.

I am not aware of any workarounds at the moment.

Thanks, that's great news !

Cheers,
David

[romgrk]

I don't like that we keep having to pick suboptimal solutions to accomodate jsdom, considering that its a test-only environment with low ongoing maintenance that doesn't reflect a real end-user environment.

[cherniavskii]

@romgrk Yeah, that sucks, but blocking people with a broken test pipeline sucks even more.
Moreover, the fix for the root issue in the downstream dependency of jsdom might take a lot of time (if ever done), and even after it's fixed the dependencies upgrade might not be straightforward.
As much as I hate it, I think it's the best thing we can do to address the issue in the short term and unblock the users.

[ddolcimascolo]

I second this. While I totally agree jsdom is behind in terms of feature set, the thing is that people use it. And they use it a lot.
Not breaking the ecosystem is very important for a project as important as MUI and it shows how seriously you consider your customers.

Thanks a lot for your excellent support and for building such high quality products!

Cheers,
David

[romgrk]

I wonder if we could find a way to signal to users they should consider moving to an alternative. At least https://github.com/capricorn86/happy-dom, if not a real headless browser.

[ddolcimascolo]

Fun fact, happy dom added support for :has only two weeks ago :) https://github.com/capricorn86/happy-dom/releases/tag/v15.7.0

[romgrk]

Good to know. Happy-dom is maintained, so I expect it to evolve with browsers, unlike jsdom.

[cherniavskii]

I wonder if we could find a way to signal to users they should consider moving to an alternative.

We can add a testing page to MUI X docs (perhaps to Material UI docs too) to cover this.

At least capricorn86/happy-dom, if not a real headless browser.

I'm not sure we fully support happy-dom though (our conditions are jsdom-specific). But we should definitely support it 👍🏻

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @ddolcimascolo! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!