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.