Components containing DataGridPro halt Jest test runner

[dep]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Create a jest test that tests a component containing DataGridPro
2. Expect the test runner to complete
3. Test hangs indefinitely

Current behavior 😯

Test hangs indefinitely

Expected behavior 🤔

Test should finish

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.2.1
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Edge: Not Found
    Firefox: 109.0
    Safari: 16.3

Order ID or Support key 💳 (optional)

53240

[dep]

I've tried downgrading @testing-library/react from 14.0 to 13.4.0, and downgrading @mui/x-data-grid-pro from 16.x to 5.17.24 with no luck

[dep]

I also tried reverting the codebase back to Thursday when my test suites were passing just fine but the problem persists. So I wonder if this is perhaps related to a licensing key issue? Is this something you can check on your end to see if we've exceeded 'Seats' ? Happy to fix this is that's the issue.

[marta-zamulovica]

Can confirm having the same issue. On Thursday with "@mui/x-data-grid-premium": "6.0.4" everything was fine. Today I upgraded the version and jest tests are getting stuck. Then I decided to downgrade back to this 6.0.4 version and the tests still get stuck.
Had updated "@mui/x-license-pro" as well from 6.0.3. to 6.0.4. and again back for testing, but didn't change the outcome of the tests either.

[dep]

Thanks for confirming @marta-zamulovica - I'm glad I'm not alone!

[lounsbrough]

I can also confirm this issue. Will share any more details if/when I figure out what's going on.

[lounsbrough]

Reproduction repo added here to illustrate the issue: https://github.com/lounsbrough/muix-jest-babel-issue.

[dep]

Thanks for the extra detail @lounsbrough !

[m4theushw]

This is being caused because the JSDOM implementation of window.getComputedStyle seems to be entering in an infinite loop or is just slow. We already had problems with this same API in our codebase but the tests never ran indefinitely. We use the following workaround before running our tests:

mui-x/test/utils/setupJSDOM.js

Lines 9 to 17 in 25b9ca9

	// The JSDOM implementation is too slow
	// https://github.com/jsdom/jsdom/issues/3234
	window.getComputedStyle = function getComputedStyleMock() {
	return {
	getPropertyValue: () => {
	return undefined;
	},
	};
	};

We should mention this in #1151

[dep]

Thanks @m4theushw I can confirm that your workaround works for me, though would prefer a formal patch to the library. At least this unblocks me for now.

[ricardasjak]

Same issue on non pro version DataGrid, when upgraded local Node from v16.x to v18.15.0.
"@mui/x-data-grid": "^5.17.2",
"@mui/x-data-grid-generator": "^5.17.2",

	global.getComputedStyle = function getComputedStyleMock() {
		return {
			getPropertyValue: () => {
				return undefined;
			},
		};
	};

Seems to help (added to setupTest.tsx in CRA) to avoid hanging, but many other tests just fail due to wrong MUI components output.

UPDATE: downgrading Node to v16.20 didn't help, downgrading DataGrid to 5.17.xx lower versions with version freeze also didnt help. I have to investigate it further tomorrow.

[agrauch]

I encountered this issue when updating to @mui/x-data-grid-pro 5.17.26. The tests ran fine with 5.16.0.

@m4theushw's solution works for now.

[sagar1111212121]

I am also facing same issue from last 3 4 days. Tried everything I can think of to resolve this issue but wasn't able to do that. Tried above solution and it works fine now so that for the solution.

But is there any proper solution for this?

[dep]

I did see datagridpro just updated to 6.2.0. I wonder if anyone has tried upgrading and if that helped?

[lounsbrough]

Here is the issue, at least for my case: dperini/nwsapi#80

I don't believe this is caused by DataGrid. Check your package lock file and if you have nwsapi version 2.2.3 that is likely the issue.

Note also that nwsapi is in the dependency tree for jest-environment-jsdom, so more than likely this is the cause for most people.

Moving to version 2.2.4 of that dependency should fix it.

[dep]

@lounsbrough
I tried upgrading to nwsapi version 2.2.4 and it did not help

[lounsbrough]

@dep - Can you confirm that there are no references in your lock file to nwsapi @ 2.2.3? package-lock.json or yarn.lock orpnpm-lock.yaml. You might also compare your dependencies to the reproduction repo, which is now working as well: https://github.com/lounsbrough/muix-jest-babel-issue.

If possible, can you delete your lock file entirely and reinstall packages?

[dep]

I don't use a lock file in my repo

[lounsbrough]

What package manager do you use, npm? You can run npm ls nwsapi or yarn why nwsapi or pnpm why nwsapi and it should tell you anywhere that dependency is installed and at what version. Beyond that I don't know what the issue would be. All I can confirm is that it fixed the issue for our work project and the sample reproduction repo. 🤷‍♂️

[dep]

@lounsbrough This is all I get with npm ls nwsapi

▶  npm ls nwsapi
repo@0.0.0
├─┬ jsdom@11.12.0 extraneous
│ └── nwsapi@2.2.4 deduped

[lounsbrough]

Yeah looks right to me, not sure what the issue is then, sorry.

[lounsbrough]

I guess one thing I see is that you're on a very old version of jsdom. (5 years old)

Here's ours for example:

jest-environment-jsdom 29.5.0
└─┬ jsdom 20.0.3
└── nwsapi 2.2.4
jsdom 21.1.1
└── nwsapi 2.2.4

[sagar1111212121]

Not similar, but after upgrading to latest 2.2.6, JEST + RTL test cases started failing which were working just fine before sometime. Anyone else facing this issue?

[dep]

@sagar1111212121 Yes I am seeing an issue today:

 FAIL  src/components/App.test.js
  ● renders the App component
    SyntaxError: Illegal break statement
        at Function (<anonymous>)

      10 |
      11 | test("renders the App component", () => {
    > 12 |   render(<App />);
         |         ^
      13 |   expect(
      14 |     screen.queryByText("No data has been loaded.", { exact: false })
      15 |   ).toBeInTheDocument();

      at compile (node_modules/jest-environment-jsdom/node_modules/nwsapi/src/nwsapi.js:760:17)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)
      at ../../../../node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:165:31
      at Proxy.computeSizeAndPublishResizeEvent (../../../../node_modules/@mui/x-data-grid/node/hooks/utils/useGridApiMethod.js:22:20)
      at ../../../../node_modules/@mui/x-data-grid/node/components/base/GridBody.js:52:20

Created this: #9582

Related: dperini/nwsapi#90

Resolution: dperini/nwsapi#90 (comment)