dom-testing-library: waitFor error "MutationObserver is not a constructor" with latest version

  • DOM Testing Library version: Using React Testing Lib Version: ^10.0.0
  • node version: v12.13.1
  • npm (or yarn) version: 6.13.7

Relevant code or config:

await waitFor(() => {
    expect(submitButton).toHaveAttribute("aria-disabled", "false");
  });

What you did:

I’m using the new React-Testing-Library version and trying to fix my tests that use waitFor, but it I am getting a MutationObserver error that is preventing my tests from passing.

I’m using the built in CRA react-scripts test command to run my tests

What happened:

    TypeError: MutationObserver is not a constructor

      146 | 
      147 |   // Wait until the picture is UPLOADED and the disabled attribute is REMOVEaD
    > 148 |   await waitFor(() => {
          |         ^
      149 |     expect(submitButton).toHaveAttribute("aria-disabled", "false");
      150 |   });
      151 | 

      at node_modules/@testing-library/dom/dist/wait-for.js:32:22
      at waitFor (node_modules/@testing-library/dom/dist/wait-for.js:25:10)
      at node_modules/@testing-library/dom/dist/wait-for.js:64:54
      at node_modules/@testing-library/react/dist/pure.js:51:22
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21887:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
      at asyncAct (node_modules/@testing-library/react/dist/act-compat.js:118:12)
      at Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:50:35)
      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:64:35)
      at Object.<anonymous> (src/components/NewSpotForm.test.js:148:9)

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 34
  • Comments: 25 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Had the same issue(latest CRA) and can confirm that this fixes it: yarn add jest-environment-jsdom-sixteen --dev

and then set it via env cli param

"scripts": {
   ...
   "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
   ...
}

That said there’s nothing more we can do in this repository so I’m going to close this issue.

Thank you to everyone here who contributed to the discussion and helped to improve the release notes.

In my case updating Jest to v25.4.0 was enough (I’m not using CRA).

For folks who don’t want to use jest-environment-jsdom-sixteen (for whatever reason), you can also include a MutationObserver shim yourself. I’ve updated the release notes.

Maybe it would be helpful for someone…

In my case even updating to the latest jest 26.x didn’t solve the problem. That was because we used to use enzyme with jest-enzyme package (we have not migrated all spec to testing-lib yet).

The problem is that the latest jest-enzyme package has dependency on jest-environement-jsdom in old version 24.9.0 🤦

yarn why jest-environment-jsdom
yarn why v1.22.4
[1/4] 🤔  Why do we have the module "jest-environment-jsdom"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "jest-environment-jsdom@24.9.0"
info Reasons this module exists
   - "jest-enzyme#jest-environment-enzyme" depends on it
   - Hoisted from "jest-enzyme#jest-environment-enzyme#jest-environment-jsdom"
info Disk size without dependencies: "1.95MB"
info Disk size with unique dependencies: "8.34MB"
info Disk size with transitive dependencies: "32.69MB"
info Number of shared dependencies: 121
=> Found "jest-config#jest-environment-jsdom@26.0.1"
info This module exists because "jest#@jest#core#jest-config" depends on it.
info Disk size without dependencies: "24KB"
info Disk size with unique dependencies: "6.41MB"
info Disk size with transitive dependencies: "30.77MB"
info Number of shared dependencies: 121
✨  Done in 1.69s.

So…the fix was about setting the proper resolution in package.json

"resolutions": {
     "jest-environment-jsdom": "^26.0.1"
}

There are three options listed in the release notes. So waiting is not your only option.

Sorry about this trouble. For some reason I thought CRA had the latest Jest. I’d there already an issue over there about upgrading?

~The problem is that latest react-scripts depends on jest@24 not jest@latest (25). jest@24 still uses jsdom@11 by default. MutationObserver got added in jsdom@13~

misread it. See https://github.com/facebook/create-react-app/pull/8362

Same issue here with jsdom 11.5.1I manually installed the last version ofjsdom (16+`) but still had the error.

@flaviendelangle On jsdom 11 this is expected. You need to make sure your testing environment is using the proper version. For example in jest you need jest-environment-jsdom-sixteen (or what it’s called). This is best asked on spectrum.chat or StackOverflow though.

This may be an issue with react-scripts having an old version of jsdom (14.1.0)?

For me, it was jest-cli that had an old version of jsdom. So first I run npm ls jsdom and then upgraded the libraries that I saw were using an old version of jsdom.

Putting some notes about this in the docs could save a lot of time & digging.

I got to the testing library from React’s Test Utilities page, and then dove into the Testing Library Example, which doesn’t work without upgrading @testing-library/react and adding jest-environment-jsdom-sixteen.

I’m happy to contribute to that change if it would help. I’d need some guidance on doc standards & the best place to add it.

For me, it was jest-cli that had an old version of jsdom. So first I run npm ls jsdom and then upgraded the libraries that I saw were using an old version of jsdom.

This worked for me! I had jest v26 installed and jest-junit v5 installed. Even though jest 26 has jsdom 16, it was using the jsdom from jest-junit which had jsdom 11!

updating jest-junit to latest (v11) fixed the issue.

Thanks for the hint @neomib! 💯

Screen Shot 2020-09-23 at 11 26 26 AM

Maybe putting a note about it on this page would be fine: https://testing-library.com/docs/dom-testing-library/api-async