React-testing-library: MutationObserver is not a constructor

[FredyC]

• @testing-library/react version: 10.0.4
• react version: 16.12.0

Relevant code or config:

import { render, screen, fireEvent } from '@testing-library/react'

test('works?', async () => {
  render(<App />)
  const elem = await screen.findByText('TEST')
  fireEvent.click(elem)
})

What you did:

Run the test :)

What happened:

Reproduction:

https://codesandbox.io/s/practical-colden-jbnzf?file=/src/App.test.js

It actually works there, because MutationObserver is available in a browser, but apparently not in jsdom

Problem description:

It's not documented anywhere that MutationObserver would need to be polyfilled. Either way, after doing the following, problem is workaround-ed :)

window.MutationObserver = require("mutation-observer");

Suggested solution:

I think polyfill should be part of the library to remove the hassle of users doing that.

[kentcdodds]

Hi @FredyC,

We're not responsible for polyfilling your environment. You are. If your environment doesn't support the DOM APIs we use, then you need to make it do that.

Luckily, the latest versions of JSDOM does support MutationObserver. And the latest version of Jest uses the latest version of JSDOM. So update those versions and you don't need the polyfill.

If you can't, then the polyfill is a good workaround. Good luck!

[FredyC]

I see, it sort of makes sense. I never used MutationObserver in the past and I thought it's some hot new thing 😅. Seeing it had issue in jsdom tracked since 2013 and it was released last year I can see my mistake :)

I guess it all drills to CRA again which uses fossil dependencies :) So I am moving my cry next door.

It was added in https://github.com/jsdom/jsdom/releases/tag/13.2.0

[kentcdodds]

A new version of react-scripts is coming soon and it will have the latest jest/jsdom

[naythanwilliams]

I added the following to the test script in package.json. And it seems to allow for use of waitFor in CRA projects
react-scripts test --env=jsdom-fourteen.
See this issue in the CRA repo
Of course, v14 is still old. But at least it works with waitFor.

[raoufswe]

In case anyone is facing the same issue and other solutions did not work.

run npm ls jsdom and check if there are any peer dependencies conflicts. one of my packages was using an older version of jsdom that did not support MutationObserver. sorting out that conflict and updating jest solved the issue.

[lc-stevenzhang]

I added the following to the test script in package.json. And it seems to allow for use of waitFor in CRA projects
react-scripts test --env=jsdom-fourteen.
See this issue in the CRA repo
Of course, v14 is still old. But at least it works with waitFor.

FYI, still need this --env=jsdom-fourteen to make waitFor working, today.

[dougpagani]

Another confirmation, July 24th 2020 --env=jsdom-fourteen is still needed.

[kentcdodds]

Yeah, I was given the impression that CRA would be updated in a matter of days after this change was made, but then something happened to delay it a lot (I think it was ESLint v7 getting released). I've been given the impression that the next version of CRA will be released in the next few days though. Hopefully that's the case and we no longer need to worry about this.