feat: upgrade to JSDOM@22 #13825
feat: upgrade to JSDOM@22 #13825
Conversation
| // Note that this.global.close() will trigger the CustomElement::disconnectedCallback | ||
| // Do not reset the document before CustomElement disconnectedCallback function has finished running, | ||
| // document should be accessible within disconnectedCallback. | ||
| Object.defineProperty(this.global, 'document', {value: null}); |
| // Note that this.global.close() will trigger the CustomElement::disconnectedCallback | ||
| // Do not reset the document before CustomElement disconnectedCallback function has finished running, | ||
| // document should be accessible within disconnectedCallback. | ||
| Object.defineProperty(this.global, 'document', {value: null}); |
There was a problem hiding this comment.
Would this fix #12670? Worth adding a test?
There was a problem hiding this comment.
https://github.com/eps1lon/react-testing-library-error-repro/tree/upgrade-jsdom now errors with
Error: The `document` global was defined when React was initialized, but is not defined
anymore. This can happen in a test environment if a component schedules an update from
an asynchronous callback, but the test has already finished running. To solve this,
you can either unmount the component at the end of your test (and ensure that any
asynchronous operations get canceled in `componentWillUnmount`), or you can change the
test itself to be asynchronous.
when using jest-environment-jsdom. This is certainly a clearer error but still unintended.
Going to do some more digging.
There was a problem hiding this comment.
Yeah, I sent facebook/react#22695 which fixed the check for the correct error, so it should match it with old jsdom as well.
There was a problem hiding this comment.
Hi @SimenB I started looking at this upgrade PR, because many of the [email protected] patches are mine and I would like to start using them in our Jest tests ASAP 🙂
I did some research about why the document is being set to null during teardown, and why that doesn't really need to be done, and summarized that in #13972.
There was a problem hiding this comment.
react-testing-library-error-repronow errors with
@eps1lon I think this is not an issue with Jest, but a bug in React 17's act implementation, when the act callback returns a promise. Then, after the promise resolves, React will synchronously flush all updates scheduled before resolving. But that code is buggy: it leaves the act environment before doing that flush, so these updates no longer work with the act queue, but are using the regular scheduler. setImmediate etc. And then they run long after the JSDOM env has been teared down.
React 18 has that fixed: it will flush the updates while still inside the act environment.
In your repro example, upgrading to React 18 in package.json immediately fixes the test for me.
|
Just a heads up: this will break any tests that rely on mocking |
|
Right, something like that was my assumption. An alternative to mocking export assignLocation(...args) {
return window.location.assign(...args);
}Then |
|
There's another breaking change in JSDOM 21.1.0, and also a bug that will need to be fixed before Jest can start using the latest JSDOM version: addition of Users of Jest and React Testing Library are currently using a workaround for missing new MouseEvent('mousemove', { clientX: 10, clientY: 10 })without any magic. |
This is however not new, the What is new is that the This is all unfortunate because while all this behavior certainly conforms to the spec, it makes mocking many |
|
@jsnajdr Any update on this? Is this only a placeholder PR for testing the update? |
|
We've been waiting for a fix of a JSDOM regression, in |
|
@jsnajdr |
|
Hi @SimenB 👋 After updating the One thing that should be in the upgrade guide is the |
✅ Deploy Preview for jestjs ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Seems that @domenic is going to release also JSDOM 22.0.0 any moment now? If so, better wait for that 🙂 |
|
This is blocked until our own next major release regardless |
|
When is the next major release of Jest? |
|
No concrete plans. You can probably use yarn's |
|
In npm, you can add this to your package.json: "overrides": {
"jsdom": "^22"
}Don't forget to update jest-environment-jsdom to a recent version too (I was getting a "Cannot read properties of null (reading '_location')" error) If curious, I just tried it on a test suite with 1322 tests that relies heavily on Testing Library and could see it running ~23% faster. Not bad at all. |
Yes you need 29.5.0 because it ships the #13972 fix that removes assignment to the no-longer-writable
I'm happy to see that other projects also see the Testing Library performance improvements with JSDOM styles caching 🎉 |
|
Damn, I wish I could test this. Looks like we are blocked by jsdom/jsdom#3492 :( |
|
@donaldpipowitch I posted a link to semi-solution I found for my case on the issue you linked, maybe it will work for you as well |
|
Ah, v22 drops node 14 as well. Definitely breaking for us then 😅 |
|
I think we see performance improvements in the range of 10%-12% :) Thanks everyone! |
|
Does anyone knows when it will be merged ? |
|
Whenever Jest 30 is released. You can use |
SimenB
force-pushed
the
upgrade-jsdom
branch
from
e47eb92
to
22d2dc4
Compare
SimenB
force-pushed
the
upgrade-jsdom
branch
from
22d2dc4
to
3c75614
Compare
|
This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Summary
This is a breaking change. But since I spent the time debugging to understand why it exploded horribly (landed in #13972) I thought to open a PR now.
Test plan
CI