dom-testing-library: waitFor error "MutationObserver is not a constructor" with latest version
DOM Testing Libraryversion: Using React Testing Lib Version: ^10.0.0nodeversion: v12.13.1npm(oryarn) 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
- test: use `jest-environment-jsdom-sixtee` for test this fixes the error `MutationObserver is not a constructor` for waitFor in `react-testing-library` https://github.com/testing-library/dom-testing-l... — committed to keingsw/auth0-react-integration by keingsw 4 years ago
- Update @testing-library/react in group main to the latest version � (#947) Summary: Note: I had to add a new Jest environment to get this to run. More context is in https://github.com/testing-library... — committed to facebook/flipper by greenkeeper[bot] 4 years ago
- chore(tests): fix tests by installing jest-environment-jsdom-sixteen Suggested solution here: https://github.com/testing-library/dom-testing-library/issues/477 — committed to ZopaPublic/react-components by deleted user 4 years ago
- chore(tests): fix tests by installing jest-environment-jsdom-sixteen Suggested solution here: https://github.com/testing-library/dom-testing-library/issues/477 — committed to ZopaPublic/react-components by deleted user 4 years ago
- Fix test to run after apiFetch promise is resolved. The of the UploadPage component is updated asynchronously when the apiFetch promise is resolved. This requires to use waitFor utility which unfortu... — committed to Automattic/sensei by gikaragia 4 years ago
- Add Jest Env JSDOM Sixteen to Fix MutationObserver Add `jest-environment-jsdom-sixteen` as Testing Library has to remove MutationObserver shim since the significant browsers and recent version of JSD... — committed to SpiritBreaker226/nfl-rushing by SpiritBreaker226 4 years ago
- Add Jest Env JSDOM Sixteen to Fix MutationObserver Add `jest-environment-jsdom-sixteen` as Testing Library has to remove MutationObserver shim since the significant browsers and recent version of JSD... — committed to SpiritBreaker226/nfl-rushing by SpiritBreaker226 4 years ago
- Fix test to run after apiFetch promise is resolved. The of the UploadPage component is updated asynchronously when the apiFetch promise is resolved. This requires to use waitFor utility which unfortu... — committed to Automattic/sensei by gikaragia 4 years ago
- Fix test to run after apiFetch promise is resolved. The of the UploadPage component is updated asynchronously when the apiFetch promise is resolved. This requires to use waitFor utility which unfortu... — committed to Automattic/sensei by gikaragia 4 years ago
- chore: fix error with waitFor on testing library - See: https://github.com/testing-library/dom-testing-library/issues/477 - Add react router dependency — committed to charliechauri/charliechauri-web by charliechauri 4 years ago
- chore: update jest to v25.4.0 https://github.com/testing-library/dom-testing-library/issues/477#issuecomment-617652033 — committed to FixMyBerlin/fixmy.frontend by s-pic 4 years ago
- Add modal component [Re: nmkataoka/adv-life#64] Had to manually upgrade jest-dom in order for react-testing-library to work properly. React scripts will be upgrading jest-dom soon in v4.0.0: https://... — committed to nmkataoka/adv-life by nmkataoka 4 years ago
- Testing/extend component unit tests (#490) * chore: install react testing library * test: remove cypress test for faq item expansion * chore(.eslintrc): get rid of warnings "XX should be liste... — committed to FixMyBerlin/fixmy.frontend by s-pic 4 years ago
- info-section: fix unit test using this: https://github.com/testing-library/dom-testing-library/issues/477#issuecomment-598606649 — committed to bahobab/reddit-timer-bahobab by bahobab 4 years ago
- Info section (#5) * header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * heade... — committed to bahobab/reddit-timer-bahobab by bahobab 4 years ago
- Subreddit form (#6) * header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * hea... — committed to bahobab/reddit-timer-bahobab by bahobab 4 years ago
- Load the data (#7) * header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * head... — committed to bahobab/reddit-timer-bahobab by bahobab 4 years ago
- Heatmap (#8) * header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fix... — committed to bahobab/reddit-timer-bahobab by bahobab 4 years ago
- Posts table (#9) * header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header... — committed to bahobab/reddit-timer-bahobab by bahobab 4 years ago
- Add Jest Env JSDOM Sixteen to Fix MutationObserver Add `jest-environment-jsdom-sixteen` as Testing Library has to remove MutationObserver shim since the significant browsers and recent version of JSD... — committed to SpiritBreaker226/hero-orders by SpiritBreaker226 4 years ago
Had the same issue(latest CRA) and can confirm that this fixes it:
yarn add jest-environment-jsdom-sixteen --devand then set it via
envcli paramThat 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
enzymewithjest-enzymepackage (we have not migrated all spec to testing-lib yet).The problem is that the latest
jest-enzymepackage has dependency onjest-environement-jsdomin old version 24.9.0 🤦So…the fix was about setting the proper resolution in package.json
There are three options listed in the release notes. So waiting is not your only option.
~The problem is that latest
react-scriptsdepends onjest@24notjest@latest(25).jest@24still usesjsdom@11by default.MutationObservergot added injsdom@13~misread it. See https://github.com/facebook/create-react-app/pull/8362
@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-scriptshaving an old version of jsdom (14.1.0)?For me, it was
jest-clithat had an old version of jsdom. So first I runnpm ls jsdomand 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/reactand addingjest-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.
This worked for me! I had
jest v26installed andjest-junit v5installed. Even thoughjest 26hasjsdom 16, it was using thejsdomfromjest-junitwhich hadjsdom 11!updating
jest-junitto latest (v11) fixed the issue.Thanks for the hint @neomib! 💯
Maybe putting a note about it on this page would be fine: https://testing-library.com/docs/dom-testing-library/api-async