react-testing-library: TypeError: MutationObserver is not a constructor

I have a test like

import React from "react";
import { render, screen } from "@testing-library/react";
import Countdown from "./Countdown";
describe('Countdown', () => {
    test("renders Countdown without crashing", async () => {
        const { container, getByText } = render(<Countdown timeTillDate="07 08 2020, 6:00 am" timeFormat="MM DD YYYY, h:mm a" />);
        await screen.findByText('Countdown');
        // render should show the title
        expect(getByText(/Countdown/)).toBeInTheDocument();
        expect(container).toContainElement(document.querySelector('h1'));
    });
});

This test fails with an exception

TypeError: MutationObserver is not a constructor

This same issue was raised and closed because a polyfill solved the problem. But it was also mentioned that with the latest code a polyfill was not needed. The web application that I am using was originally started with Create-React-App. Here is a snippet of my package.json to get an idea of the versions I am using:

    "@testing-library/dom": "^7.20.0",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/react": "^10.4.3",
    "@testing-library/user-event": "^12.0.11",
...
    "cross-env": "6.0.3",
...
    "ts-jest": "^26.1.1",
    "typescript": "3.9.6"

With these versions I shouldn’t need a polyfill right?

Thank you.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 12
Comments: 24 (9 by maintainers)

Links to this issue

reactjs - react typescript testing TypeError: MutationObserver is not a constructor - Stack Overflow

Commits related to this issue

Refs #126375 attempt to fix tests after testing upgrade: https://github.com/testing-library/react-testing-library/issues/731#issuecomment-740799553 — committed to eea/volto-slate by ichim-david 3 years ago
Use required jsdom environment * https://github.com/testing-library/react-testing-library/issues/731#issuecomment-667632723 * https://testing-library.com/docs/react-testing-library/setup/#jest-24-or-... — committed to vavato-be/vavato-ui by tjvc 3 years ago
Use required jsdom environment * https://github.com/testing-library/react-testing-library/issues/731#issuecomment-667632723 * https://testing-library.com/docs/react-testing-library/setup/#jest-24-or-... — committed to vavato-be/vavato-ui by tjvc 3 years ago

Most upvoted comments

For other people facing the “MutationObserver is not a constructor” issue, It took me some time to figure out what’s the basic solution, so I’m posting this because it might save you some time.

go to this part in the documentation: https://testing-library.com/docs/react-testing-library/setup#jest-24-or-lower-and-defaults

react-scripts includes a dependency called jest-environment-jsdom-fourteen.

All I had to do to get rid of the MutationObserver problem, is to run the test using a jest option: --env jest-environment-jsdom-fourteen

+91

nogashimoni on Aug 2, 2020

As this one doesn’t seem to be mentioned here yet, I took my fix from an answer on this issue: https://github.com/testing-library/dom-testing-library/issues/477#issuecomment-629183432

Install jest-environment-jsdom:

npm i -D jest-environment-jsdom

Add to package.json:

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

woudsma on Dec 8, 2020

Kevin try this: https://stackoverflow.com/questions/61036156/react-typescript-testing-typeerror-mutationobserver-is-not-a-constructor

AndonIgnatov on Jul 14, 2020

Also react-scripts v4 is in alpha right now and it works without any extra effort FYI. It’s awesome.

kentcdodds on Aug 22, 2020

Its October. Fix according to developer and seems to work fine in my latest CRA project npm install react-scripts@next

"MutationObserver need jsdom 16

in v4 of react-scripts uses that by default"

You can also update testing library with npm-check-updates (works for yarn too )

npm install -g npm-check-updates
ncu ( see what deps can be updated )
ncu -u ( update said deps in package.json )
yarn or npm install

https://github.com/raineorshine/npm-check-updates

stephyswe on Oct 18, 2020

Also it’s easier to check duplicate versions with npm ls jsdom or yarn why jsdom. Make sure you’re using the same package manager you install the project with or the result may be incorrect.

nickmccurdy on Jul 4, 2020

At the end though managed it to work with MutationObserver polyfill, react-scripts test --env=jest-environment-jsdom-sixteen is of no avail.

Sorry, I didn’t understand that, you’re saying it doesn’t work?

As you can see in @kentcdodds’s comment here, you can either shim it yourself our use jest-environment-jsdom-sixteen…

MatanBobi on Aug 20, 2020

temp solution but I’ve added the MutationObserver package to the devDependencies and adding it to the global scope like this before running tests:

import MutationObserver from "mutation-observer";
global.MutationObserver = MutationObserver;

TijmenH on Jul 15, 2020

Is this the issue you were referring to? https://github.com/testing-library/react-testing-library/issues/730

For #730, the issue was that two different dependencies both specified different versions of jsdom. It seems like that’s a possibilty here as well. If you’d like to troubleshoot this hypothesis, you can poke around your package-lock.json/yarn.lock and try to figure out what versions of jsdom are being specified.

As for polyfilling… 🤔 I suspect your application/dev env is polyfilling MutationObserver appropriately, but it’s plausible that polyfilling is not applied in the same way (or at all!) to your test environment. That’s another avenue you could explore!

This issue seems pretty common, it might be worth a dedicated spot in the docs (or even a custom error message?)

tjefferson08 on Jul 4, 2020

Nick,

From package.json I am using version 3.4.1 and that is that latest version of react-scripts. It doesn’t look like I can upgrade react-scripts.

Kevin

On Sat, Jul 4, 2020 at 11:22 PM Nick McCurdy notifications@github.com wrote:

There are three versions of jsdom (starting with => Found), all installed as dependencies within react-scripts. Try upgrading the package.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/testing-library/react-testing-library/issues/731#issuecomment-653840352, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUFM3T2IXSQHCW6HHV7KEDRZ75ZLANCNFSM4OQJYFQA .

KevinBurton on Jul 5, 2020