waitFor error "MutationObserver is not a constructor" with latest version

[transmissions11]

• 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)

[transmissions11]

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

[eps1lon]

@TransmissionsDev Please include the exact version of react-scripts or describe your test setup. jsdom 14 should have MutationObserver

[flaviendelangle]

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

[eps1lon]

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.

[bartlomiejzuber]

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",
   ...
}

[kentcdodds]

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

[eps1lon]

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 facebook/create-react-app#8362

[kentcdodds]

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.

[transmissions11]

@kentcdodds So the solution here is to get CRA to upgrade their version of Jest? That's unfortunate, I hope we can get some quick progress with them.

[kentcdodds]

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

[kentcdodds]

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.

[selena-mallet]

this fix : #477 (comment)
works also with jest:
"scripts": {
...
"test": "jest --maxWorkers=1 --env=jest-environment-jsdom-sixteen",
...
}

[SandroMiguel]

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

[kentr]

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.

[kentcdodds]

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

[vadimshvetsov]

How to make it working in CodeSandbox? There is no window object and workaround with MutationObserver is not applicable. Also setting react-scripts test --env=jest-environment-jsdom-sixteen doesn't help.

https://codesandbox.io/s/field-eokex?file=/src/__tests__/hello.js

[kentcdodds]

It works in codesandbox actually: https://codesandbox.io/s/zen-paper-wdfcu?file=/src/__tests__/index.js:539-595

I'm guessing there's something else wrong with your example.

[vadimshvetsov]

@kentcdodds thanks, looks like there is a problem within my code or react-hook-form, but can't find out where. I've set a MutationObserver polyfill like in release notes of @testing-library/dom@7, but it doesn't works. Anyway I won't someone to spend a time on it, it's not very important issue, I've got just spyOn console.error to suppress an act warning there

[przemuh]

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"
}

[stonecrafter]

I get this error when running react-scripts test --env=jest-environment-jsdom-sixteen .... anybody else?

Cannot find module '@babel/compat-data/plugin-bugfixes' (While processing: "[path/to/my/project]/node_modules/react-scripts/node_modules/babel-preset-react-app/index.js")

at Object.<anonymous> (node_modules/react-scripts/node_modules/@babel/preset-env/lib/plugins-compat-data.js:10:46)

Haven't found anyone else write about having this issue (or fixing it)

[neomib]

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.

[jonbwalker]

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! 💯

[richardwan]

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.

which solution did you use in this example? https://github.com/kentcdodds/react-testing-library-examples I cant seem to find a reference to the shim or the jsdom-sixteen in the package.json

it looks like you took a 4th option and upgraded react-scripts https://github.com/kentcdodds/react-testing-library-examples/blob/master/package.json#L26

is this the a new preferred option?

[totaland]

Hi @kentcdodds,

There seems to be a timeout error when you fire the await waitForElementToBeRemoved twice.

So the app I built has 3 stages when I click on a button I fire that waitForElementToBeRemoved and assert the new layout. This new layout will also has a next button. I click on that button and fire that waitForElementToBeRemoved. This time it didn't work and will have the timeout error for waitForElementToBeRemoved.

How do I fix that?

[ajfranzoia]

If you're using Webstom and your tests are still failing, install the package as specified in #477 (comment) and try adding --env=jest-environment-jsdom-sixteen to the Jest run configuration template.