feat: upgrade to JSDOM@22 #13825

SimenB · 2023-01-26T14:57:13Z

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

SimenB · 2023-01-26T14:58:19Z

packages/jest-environment-jsdom/src/index.ts

-      // 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});


added in #5955 - @mjesun you don't by any chance remember what it was added for? this.global.document is undefined after calling this.global.close();

eps1lon · 2023-01-28T11:07:04Z

packages/jest-environment-jsdom/src/index.ts

-      // 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});


Would this fix #12670? Worth adding a test?

quite possibly...

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.

Yeah, I sent facebook/react#22695 which fixed the check for the correct error, so it should match it with old jsdom as well.

Hi @SimenB I started looking at this upgrade PR, because many of the JSDOM@21.1.0 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.

react-testing-library-error-repro now 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.

pleunv · 2023-02-06T07:33:50Z

Just a heads up: this will break any tests that rely on mocking window.location.assign, which I don't think is an uncommon approach. Still looking for an alternative solution.

SimenB · 2023-02-06T11:01:45Z

Right, something like that was my assumption.

An alternative to mocking assign directly could be a separate module.

export assignLocation(...args) {
  return window.location.assign(...args);
}

Then jest.mock that module instead of the API it uses.

jsnajdr · 2023-03-02T15:15:08Z

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 pageX and pageY getters to MouseEvent in jsdom/jsdom#3484. These getters calculate pageX and pageY incorrectly. Described in detail in https://github.com/jsdom/jsdom/pull/3484/files#r1123237268

Users of Jest and React Testing Library are currently using a workaround for missing pageX and pageY support described in testing-library/react-testing-library#268 (comment), subclassing MouseEvent and assigning to pageX and pageY in constructor. This no longer works with JSDOM 21.1.0, because pageX and pageY are no longer writable. Folks will be able to just create a plain MouseEvent:

new MouseEvent('mousemove', { clientX: 10, clientY: 10 })

without any magic.

jsnajdr · 2023-03-02T15:28:56Z

this will break any tests that rely on mocking window.location.assign

This is however not new, the location.assign property has been non-configurable even in JSDOM 20, the version we're upgrading from here. jest.spyOn(window.location, 'assign') will fail on current stable version of Jest, too.

What is new is that the window.document, location and top properties are now non-configurable, too. With JSDOM 20 you could assign your mock version to window.location, but now you no longer can.

This is all unfortunate because while all this behavior certainly conforms to the spec, it makes mocking many window properties impossible. Given that unit testing is likely the number one use case for JSDOM, by a large margin, it should provide some escape hatch for mocking.

karlnorling · 2023-04-17T09:21:54Z

@jsnajdr Any update on this? Is this only a placeholder PR for testing the update?

jsnajdr · 2023-04-17T09:41:27Z

We've been waiting for a fix of a JSDOM regression, in MouseEvent, discussed in #13825 (comment). The JSDOM fix was accepted and merged yesterday, in jsdom/jsdom#3514. So, as soon as new version of JSDOM is released (21.1.2 or 21.2.0), this Jest PR will be ready to pick it up and ship.

uladzimirdev · 2023-05-01T18:58:00Z

@jsnajdr 21.1.2 is released!

jsnajdr · 2023-05-02T06:37:14Z

Hi @SimenB 👋 After updating the package.json and the lockfile to JSDOM 21.1.2, this PR should be mergeable. It's my understanding that a major JSDOM upgrade triggers also a major upgrade of Jest.

One thing that should be in the upgrade guide is the MouseEvent changes described in #13825 (comment): the old subclassing workaround, which no longer works, and can be replaced with a normal instantiation of MouseEvent. I can help with writing the section if I know how and where it's being created.

netlify · 2023-05-02T07:30:54Z

✅ Deploy Preview for jestjs ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`a36c5ed`
🔍 Latest deploy log	https://app.netlify.com/sites/jestjs/deploys/65098260835ea60008a961d4
😎 Deploy Preview	https://deploy-preview-13825--jestjs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

jsnajdr · 2023-05-02T11:48:16Z

Seems that @domenic is going to release also JSDOM 22.0.0 any moment now? If so, better wait for that 🙂

SimenB · 2023-05-02T11:51:50Z

This is blocked until our own next major release regardless

donaldpipowitch · 2023-05-02T14:51:12Z

When is the next major release of Jest?

SimenB · 2023-05-02T15:09:13Z

No concrete plans. You can probably use yarn's resolutions (or whatever the equivalent in npm/pnpm is) as there's no code changes in jest, so just forcing a newer version of jsdom should be fine

frosas · 2023-05-02T21:53:57Z

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.

jsnajdr · 2023-05-03T05:28:17Z

Don't forget to update jest-environment-jsdom to a recent version

Yes you need 29.5.0 because it ships the #13972 fix that removes assignment to the no-longer-writable window.document.

I just tried it on a test suite with 1322 tests that relies heavily on Testing Library and could see it running ~23% faster.

I'm happy to see that other projects also see the Testing Library performance improvements with JSDOM styles caching 🎉

donaldpipowitch · 2023-05-04T07:23:22Z

Damn, I wish I could test this. Looks like we are blocked by jsdom/jsdom#3492 :(

uladzimirdev · 2023-05-10T09:12:31Z

@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

SimenB · 2023-05-10T09:22:11Z

Ah, v22 drops node 14 as well. Definitely breaking for us then 😅

donaldpipowitch · 2023-05-11T08:27:09Z

I think we see performance improvements in the range of 10%-12% :) Thanks everyone!

gianluca932 · 2023-05-26T08:30:25Z

Does anyone knows when it will be merged ?
I am experiencing this issue jsdom/jsdom#3452 that has been solved with jsdom 21.1.5

SimenB · 2023-05-26T08:33:54Z

Whenever Jest 30 is released.

You can use resolutions in the meantime - there are no code changes in Jest from 29.5.0

github-actions · 2023-10-20T00:08:52Z

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.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

SimenB · 2023-10-30T13:37:00Z

https://github.com/jestjs/jest/releases/tag/v30.0.0-alpha.1

SimenB added the Pinned label Jan 26, 2023

SimenB added this to the Jest 30 milestone Jan 26, 2023

facebook-github-bot added the cla signed label Jan 26, 2023

SimenB commented Jan 26, 2023

View reviewed changes

SimenB mentioned this pull request Jan 28, 2023

jest-environment-jsdom: Bump JSDOM to 21.x #13833

Closed

1 task

eps1lon reviewed Jan 28, 2023

View reviewed changes

This was referenced Mar 1, 2023

jest-environment-jsdom: stop setting document to null on teardown #13972

Merged

Add CSSOM View extensions to MouseEvent jsdom/jsdom#3484

Merged

SimenB force-pushed the upgrade-jsdom branch from 13b845d to 40f4399 Compare March 2, 2023 15:31

jenseng mentioned this pull request Mar 2, 2023

MouseEvent: fix pageX/Y and offsetX/Y during dispatch jsdom/jsdom#3514

Merged

SimenB force-pushed the upgrade-jsdom branch from 40f4399 to 0bad706 Compare March 6, 2023 13:54

jsnajdr mentioned this pull request Mar 28, 2023

Cache element styles for getComputedStyle jsdom/jsdom#3482

Merged

jenseng mentioned this pull request Apr 18, 2023

fix(react-router-dom): fix submitter serialization remix-run/react-router#9865

Merged

SimenB force-pushed the upgrade-jsdom branch from 0bad706 to f9be3a3 Compare May 2, 2023 07:30

SimenB force-pushed the upgrade-jsdom branch from f9be3a3 to c89e3d9 Compare May 2, 2023 10:11

SimenB changed the title ~~feat: upgrade to JSDOM@21~~ feat: upgrade to JSDOM@22 May 4, 2023

SimenB force-pushed the upgrade-jsdom branch from c89e3d9 to e47eb92 Compare May 4, 2023 04:23

jenseng mentioned this pull request May 5, 2023

chore: upgrade jest and jsdom remix-run/react-router#10453

Merged

liamcmitchell-sc mentioned this pull request Jun 5, 2023

fix(event): assign pointer coords to MouseEvent testing-library/user-event#1039

Open

2 tasks

SimenB mentioned this pull request Jun 22, 2023

fix(deps): update dependency @types/jsdom to v21 #14244

Closed

1 task

SimenB mentioned this pull request Jul 6, 2023

Update package.json #14303

Closed

SimenB mentioned this pull request Jul 24, 2023

fix(deps): update dependency jsdom to v22 #14259

Closed

1 task

MGibson1 mentioned this pull request Aug 1, 2023

[Bug]: jest-environment-jsdom webIDL validator issue in node 18 #14379

Closed

SimenB mentioned this pull request Aug 22, 2023

[Bug]: Dependency vulnerability within jest 29.6.3 #14438

Closed

SimenB mentioned this pull request Sep 12, 2023

fix: get Jest green nodejs/citgm#974

Merged

4 tasks

SimenB force-pushed the upgrade-jsdom branch from e47eb92 to 22d2dc4 Compare September 14, 2023 06:48

SimenB mentioned this pull request Sep 14, 2023

chore: add nightly build #14521

Merged

feat: upgrade to JSDOM@22

3c75614

SimenB force-pushed the upgrade-jsdom branch from 22d2dc4 to 3c75614 Compare September 14, 2023 10:36

SimenB added 2 commits September 19, 2023 09:55

Merge branch 'main' into upgrade-jsdom

2bf5cfd

changelog

1d98ae6

SimenB enabled auto-merge (squash) September 19, 2023 07:57

Merge branch 'main' into upgrade-jsdom

a36c5ed

SimenB disabled auto-merge September 19, 2023 11:13

SimenB merged commit 2cfb274 into jestjs:main Sep 19, 2023
4 of 7 checks passed

SimenB deleted the upgrade-jsdom branch September 19, 2023 11:13

github-actions bot locked as resolved and limited conversation to collaborators Oct 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: upgrade to JSDOM@22 #13825

feat: upgrade to JSDOM@22 #13825

SimenB commented Jan 26, 2023 •

edited

Loading

SimenB Jan 26, 2023

eps1lon Jan 28, 2023

SimenB Jan 28, 2023

eps1lon Jan 31, 2023 •

edited

Loading

SimenB Jan 31, 2023 •

edited

Loading

jsnajdr Mar 1, 2023

jsnajdr Mar 1, 2023

pleunv commented Feb 6, 2023

SimenB commented Feb 6, 2023

jsnajdr commented Mar 2, 2023

jsnajdr commented Mar 2, 2023

karlnorling commented Apr 17, 2023

jsnajdr commented Apr 17, 2023

uladzimirdev commented May 1, 2023

jsnajdr commented May 2, 2023

netlify bot commented May 2, 2023 •

edited

Loading

jsnajdr commented May 2, 2023

SimenB commented May 2, 2023

donaldpipowitch commented May 2, 2023

SimenB commented May 2, 2023 •

edited

Loading

frosas commented May 2, 2023

jsnajdr commented May 3, 2023

donaldpipowitch commented May 4, 2023

uladzimirdev commented May 10, 2023

SimenB commented May 10, 2023

donaldpipowitch commented May 11, 2023 •

edited

Loading

gianluca932 commented May 26, 2023 •

edited

Loading

SimenB commented May 26, 2023 •

edited

Loading

github-actions bot commented Oct 20, 2023

SimenB commented Oct 30, 2023

feat: upgrade to JSDOM@22 #13825

feat: upgrade to JSDOM@22 #13825

Conversation

SimenB commented Jan 26, 2023 • edited Loading

Summary

Test plan

SimenB Jan 26, 2023

Choose a reason for hiding this comment

eps1lon Jan 28, 2023

Choose a reason for hiding this comment

SimenB Jan 28, 2023

Choose a reason for hiding this comment

eps1lon Jan 31, 2023 • edited Loading

Choose a reason for hiding this comment

SimenB Jan 31, 2023 • edited Loading

Choose a reason for hiding this comment

jsnajdr Mar 1, 2023

Choose a reason for hiding this comment

jsnajdr Mar 1, 2023

Choose a reason for hiding this comment

pleunv commented Feb 6, 2023

SimenB commented Feb 6, 2023

jsnajdr commented Mar 2, 2023

jsnajdr commented Mar 2, 2023

karlnorling commented Apr 17, 2023

jsnajdr commented Apr 17, 2023

uladzimirdev commented May 1, 2023

jsnajdr commented May 2, 2023

netlify bot commented May 2, 2023 • edited Loading

✅ Deploy Preview for jestjs ready!

jsnajdr commented May 2, 2023

SimenB commented May 2, 2023

donaldpipowitch commented May 2, 2023

SimenB commented May 2, 2023 • edited Loading

frosas commented May 2, 2023

jsnajdr commented May 3, 2023

donaldpipowitch commented May 4, 2023

uladzimirdev commented May 10, 2023

SimenB commented May 10, 2023

donaldpipowitch commented May 11, 2023 • edited Loading

gianluca932 commented May 26, 2023 • edited Loading

SimenB commented May 26, 2023 • edited Loading

github-actions bot commented Oct 20, 2023

SimenB commented Oct 30, 2023

SimenB commented Jan 26, 2023 •

edited

Loading

eps1lon Jan 31, 2023 •

edited

Loading

SimenB Jan 31, 2023 •

edited

Loading

netlify bot commented May 2, 2023 •

edited

Loading

SimenB commented May 2, 2023 •

edited

Loading

donaldpipowitch commented May 11, 2023 •

edited

Loading

gianluca932 commented May 26, 2023 •

edited

Loading

SimenB commented May 26, 2023 •

edited

Loading