-
Notifications
You must be signed in to change notification settings - Fork 469
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
waitFor error "MutationObserver is not a constructor" with latest version #477
Comments
This may be an issue with |
@TransmissionsDev Please include the exact version of |
|
@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. |
Had the same issue(latest CRA) and can confirm that this fixes it: and then set it via
|
Sorry about this trouble. For some reason I thought CRA had the latest Jest. Is there already an issue over there about upgrading? |
misread it. See facebook/create-react-app#8362 |
For folks who don't want to use |
@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. |
There are three options listed in the release notes. So waiting is not your only option. |
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. |
this fixes the error `MutationObserver is not a constructor` for waitFor in `react-testing-library` testing-library/dom-testing-library#477
…947) Summary: Note: I had to add a new Jest environment to get this to run. More context is in testing-library/dom-testing-library#477. Pull Request resolved: #947 Test Plan: yarn test Reviewed By: mweststrate Differential Revision: D20766231 Pulled By: passy fbshipit-source-id: bd6bf732cae862d84ad5ab66a3e57d5933a030a5
this fix : #477 (comment) |
In my case updating Jest to v25.4.0 was enough (I'm not using CRA). |
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 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. |
Maybe putting a note about it on this page would be fine: https://testing-library.com/docs/dom-testing-library/api-async |
How to make it working in CodeSandbox? There is no window object and workaround with https://codesandbox.io/s/field-eokex?file=/src/__tests__/hello.js |
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. |
@kentcdodds thanks, looks like there is a problem within my code or |
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 The problem is that the latest
So...the fix was about setting the proper resolution in package.json
|
I get this error when running
Haven't found anyone else write about having this issue (or fixing it) |
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: testing-library/dom-testing-library#477
* chore: install react testing library * test: remove cypress test for faq item expansion * chore(.eslintrc): get rid of warnings "XX should be listed in the project's dependencies, not devDependencies" see https://stackoverflow.com/a/44939592 * chore: install @testing-library/jest-dom * [WIP] test(reports/FaqItem): add first failing test * test: remove unit test for faq item react-testing-library is not able to detect that the ancestor element of the element containing the text has overflow=hidden applied. Cypress is way smarter here. https://github.com/testing-library/jest-dom/#tobevisible https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Additionally-an-element-is-considered-hidden-if * Revert "test: remove cypress test for faq item expansion" This reverts commit ec9b9c4 * [WIP]test(AutoCompleteGeocoder): add first unit tests * test(AutoCompleteGeocode): test callbacks for focus and blur * chore: add msw https://github.com/mswjs/msw https://kentcdodds.com/blog/stop-mocking-fetch * chore: update jest to v25.4.0 testing-library/dom-testing-library#477 (comment) * test(AutoCompleteGeocoder): [WIP] add more tests * testing(AutoCompleteGeocoder): almost done (wip) * test(AutoCompleteGeocoder): refactor unit tests * test(AutoCompleteGeocoder): fix test for request buffering * test(AutoCompleteGeocoder): prettify * test(AutoCompleteGeocoder): sharpen test for locationPick callback * test(AutoCompleteGeocoder): refactor tests for async input handling * test(AutoCompleteGeocoder): [WIP]: test onEnter logic * test(AutoCompleteGeocoder): test error and reset handling * test(AutoCompleteGeocoder): correctly test enter press when only one suggestion is being displayed * test(AutoCompleteGeocoder): minor cleanup * fix broken tests by correctly overriding global fetch during tests * fix(eslintrc): malconfiguration regarding implicit dependencies * refactor: prettier * Replacing globals can make debugging hard The problem can be solved by importing node-fetch here. Even better would be to use `ky-universal` but that would require further refactoring. * improve(AutoCompleteGeocoder.unit.test): speed up tests by lowering debounceTime Co-authored-by: Vincent Ahrend <mail@vincentahrend.com>
For me, it was |
This worked for me! I had updating Thanks for the hint @neomib! 💯 |
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 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? |
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? |
* header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fixing test * implemented unit test * header: before rebase after app-skeleton-review * resolved conflicts. Fixed unit tests * footer: initial commit * implemented Footer.js and Footer.style.js * footer: completed unit tests * hero-section: initial commit with with fixes from previous PR * hero-section: completed unit tests * hero-section: fixed linting issues in unit tests * hero-section: fixed Apps to have all unit tests pass * hero-section: added missing test descriptions in footer.js * hero-section: refactor components and file structure after review * info-section: initial commit * info-section: implemented About and How it works sections * info-section: fix link to https://ooloo.io/employers * info-section: implemented react-router-hash-link * info-section: fixed ooloo.io link * info-section: implemented unit tests * info-section: fixed linting errors * info-section: fixed linting errors * info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment) * info-section: commit after review
* header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fixing test * implemented unit test * header: before rebase after app-skeleton-review * resolved conflicts. Fixed unit tests * footer: initial commit * implemented Footer.js and Footer.style.js * footer: completed unit tests * hero-section: initial commit with with fixes from previous PR * hero-section: completed unit tests * hero-section: fixed linting issues in unit tests * hero-section: fixed Apps to have all unit tests pass * hero-section: added missing test descriptions in footer.js * hero-section: refactor components and file structure after review * info-section: initial commit * info-section: implemented About and How it works sections * info-section: fix link to https://ooloo.io/employers * info-section: implemented react-router-hash-link * info-section: fixed ooloo.io link * info-section: implemented unit tests * info-section: fixed linting errors * info-section: fixed linting errors * info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment) * info-section: commit after review * subreddit-form: initial commit. Setup folder structure * subreddit-form: implement tests * subreddit-form: fix lint error in Header.js * subreddit-form: completed unit and e2e tests * subreddit-form: fixes and cleanup after review
* header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fixing test * implemented unit test * header: before rebase after app-skeleton-review * resolved conflicts. Fixed unit tests * footer: initial commit * implemented Footer.js and Footer.style.js * footer: completed unit tests * hero-section: initial commit with with fixes from previous PR * hero-section: completed unit tests * hero-section: fixed linting issues in unit tests * hero-section: fixed Apps to have all unit tests pass * hero-section: added missing test descriptions in footer.js * hero-section: refactor components and file structure after review * info-section: initial commit * info-section: implemented About and How it works sections * info-section: fix link to https://ooloo.io/employers * info-section: implemented react-router-hash-link * info-section: fixed ooloo.io link * info-section: implemented unit tests * info-section: fixed linting errors * info-section: fixed linting errors * info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment) * info-section: commit after review * subreddit-form: initial commit. Setup folder structure * subreddit-form: implement tests * subreddit-form: fix lint error in Header.js * subreddit-form: completed unit and e2e tests * subreddit-form: fixes and cleanup after review * load-the-data: initial commit: added LoadTheData.js * load-the-data: fetching data implemented. But unit test and e2e test filing * load-the-data: troubleshooting tests * load-the-data: continue troubleshooting tests * load-the-data: fix linting error * load-the-data: fix the code to fetch top 500 posts * load-the-data: troubleshooting unit test - 'invalid json response body at reason: Unexpected end of JSON input' * load-the-data: integration test passing * load-the-data: refactor code after review. still 1 test to fix in SearchPage.js * laod-the-data: all tests pass
* header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fixing test * implemented unit test * header: before rebase after app-skeleton-review * resolved conflicts. Fixed unit tests * footer: initial commit * implemented Footer.js and Footer.style.js * footer: completed unit tests * hero-section: initial commit with with fixes from previous PR * hero-section: completed unit tests * hero-section: fixed linting issues in unit tests * hero-section: fixed Apps to have all unit tests pass * hero-section: added missing test descriptions in footer.js * hero-section: refactor components and file structure after review * info-section: initial commit * info-section: implemented About and How it works sections * info-section: fix link to https://ooloo.io/employers * info-section: implemented react-router-hash-link * info-section: fixed ooloo.io link * info-section: implemented unit tests * info-section: fixed linting errors * info-section: fixed linting errors * info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment) * info-section: commit after review * subreddit-form: initial commit. Setup folder structure * subreddit-form: implement tests * subreddit-form: fix lint error in Header.js * subreddit-form: completed unit and e2e tests * subreddit-form: fixes and cleanup after review * load-the-data: initial commit: added LoadTheData.js * load-the-data: fetching data implemented. But unit test and e2e test filing * load-the-data: troubleshooting tests * load-the-data: continue troubleshooting tests * load-the-data: fix linting error * load-the-data: fix the code to fetch top 500 posts * load-the-data: troubleshooting unit test - 'invalid json response body at reason: Unexpected end of JSON input' * load-the-data: integration test passing * load-the-data: refactor code after review. still 1 test to fix in SearchPage.js * laod-the-data: all tests pass * heatmap: first commit: setup heatmap table * heatmap: implemented heatmap architecture * heatmap: implemented user timezone * heatmap: implemented hover, highlit and timezone * heatmap: completed implementation - start testing * heatmap: refactor component structure - set test skeleton * heatmap: complete integration tests * heatmap: complete. fix user timezone in tests * heatmap: refactor code after review * heatmap: fix all test errors. ready to merge pr * heatmap: fix last test errors. ready to merge pr
* header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fixing test * implemented unit test * header: before rebase after app-skeleton-review * resolved conflicts. Fixed unit tests * footer: initial commit * implemented Footer.js and Footer.style.js * footer: completed unit tests * hero-section: initial commit with with fixes from previous PR * hero-section: completed unit tests * hero-section: fixed linting issues in unit tests * hero-section: fixed Apps to have all unit tests pass * hero-section: added missing test descriptions in footer.js * hero-section: refactor components and file structure after review * info-section: initial commit * info-section: implemented About and How it works sections * info-section: fix link to https://ooloo.io/employers * info-section: implemented react-router-hash-link * info-section: fixed ooloo.io link * info-section: implemented unit tests * info-section: fixed linting errors * info-section: fixed linting errors * info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment) * info-section: commit after review * subreddit-form: initial commit. Setup folder structure * subreddit-form: implement tests * subreddit-form: fix lint error in Header.js * subreddit-form: completed unit and e2e tests * subreddit-form: fixes and cleanup after review * load-the-data: initial commit: added LoadTheData.js * load-the-data: fetching data implemented. But unit test and e2e test filing * load-the-data: troubleshooting tests * load-the-data: continue troubleshooting tests * load-the-data: fix linting error * load-the-data: fix the code to fetch top 500 posts * load-the-data: troubleshooting unit test - 'invalid json response body at reason: Unexpected end of JSON input' * load-the-data: integration test passing * load-the-data: refactor code after review. still 1 test to fix in SearchPage.js * laod-the-data: all tests pass * heatmap: first commit: setup heatmap table * heatmap: implemented heatmap architecture * heatmap: implemented user timezone * heatmap: implemented hover, highlit and timezone * heatmap: completed implementation - start testing * heatmap: refactor component structure - set test skeleton * heatmap: complete integration tests * heatmap: complete. fix user timezone in tests * heatmap: refactor code after review * heatmap: fix all test errors. ready to merge pr * heatmap: fix last test errors. ready to merge pr * posts-table: e2e tests passing * posts-table: 2 integration tests remaining * posts-table: resolved conflicts * posts-table: fix lint issue * posts-table: fix lint issue * posts-table: implemented posts sorted by time created * post-table: refactor after review
Add `jest-environment-jsdom-sixteen` as Testing Library has to remove MutationObserver shim since the significant browsers and recent version of JSDOM support MutationObserver, so there is no need for Testing Library have their version of MutationObserver. However, `react-scripts` have not updated to account for the loss of MutationObserver. As a result, we add in manually until `react-scripts` has updated. --- Ref: testing-library/dom-testing-library#477 https://github.com/testing-library/dom-testing-library/releases/tag/v7.0.0
* header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fixing test * implemented unit test * header: before rebase after app-skeleton-review * resolved conflicts. Fixed unit tests * footer: initial commit * implemented Footer.js and Footer.style.js * footer: completed unit tests * hero-section: initial commit with with fixes from previous PR * hero-section: completed unit tests * hero-section: fixed linting issues in unit tests * hero-section: fixed Apps to have all unit tests pass * hero-section: added missing test descriptions in footer.js * hero-section: refactor components and file structure after review * info-section: initial commit * info-section: implemented About and How it works sections * info-section: fix link to https://ooloo.io/employers * info-section: implemented react-router-hash-link * info-section: fixed ooloo.io link * info-section: implemented unit tests * info-section: fixed linting errors * info-section: fixed linting errors * info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment) * info-section: commit after review * subreddit-form: initial commit. Setup folder structure * subreddit-form: implement tests * subreddit-form: fix lint error in Header.js * subreddit-form: completed unit and e2e tests * subreddit-form: fixes and cleanup after review * load-the-data: initial commit: added LoadTheData.js * load-the-data: fetching data implemented. But unit test and e2e test filing * load-the-data: troubleshooting tests * load-the-data: continue troubleshooting tests * load-the-data: fix linting error * load-the-data: fix the code to fetch top 500 posts * load-the-data: troubleshooting unit test - 'invalid json response body at reason: Unexpected end of JSON input' * load-the-data: integration test passing * load-the-data: refactor code after review. still 1 test to fix in SearchPage.js * laod-the-data: all tests pass * heatmap: first commit: setup heatmap table * heatmap: implemented heatmap architecture * heatmap: implemented user timezone * heatmap: implemented hover, highlit and timezone * heatmap: completed implementation - start testing * heatmap: refactor component structure - set test skeleton * heatmap: complete integration tests * heatmap: complete. fix user timezone in tests * heatmap: refactor code after review * heatmap: fix all test errors. ready to merge pr * heatmap: fix last test errors. ready to merge pr * posts-table: e2e tests passing * posts-table: 2 integration tests remaining * posts-table: resolved conflicts * posts-table: fix lint issue * posts-table: fix lint issue * posts-table: implemented posts sorted by time created * post-table: refactor after review * Final refactor: cleaned up tests and set background color to white * readme: add project readme * readme: made header menu responsive on mobile device * readme: made header menu responsive on mobile device: fixe error * readme: implemented cell with deleted author and cell background colr scheme selection * readme: implemented postsTable display in modal window
Needed to install ts-jest to avoid typescript errors when trying to clear mocked implementation. See link below: kulshekhar/ts-jest#576 Also CRA has outdated jsdom (v14.1.0) which results in MutationObserver error when trying to use WaitFor's in react testing library. Needed to jsdom-sixteen package to run jest with jsdom v16. See the link below testing-library/dom-testing-library#477
* header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fixing test * implemented unit test * header: before rebase after app-skeleton-review * resolved conflicts. Fixed unit tests * footer: initial commit * implemented Footer.js and Footer.style.js * footer: completed unit tests * hero-section: initial commit with with fixes from previous PR * hero-section: completed unit tests * hero-section: fixed linting issues in unit tests * hero-section: fixed Apps to have all unit tests pass * hero-section: added missing test descriptions in footer.js * hero-section: refactor components and file structure after review * info-section: initial commit * info-section: implemented About and How it works sections * info-section: fix link to https://ooloo.io/employers * info-section: implemented react-router-hash-link * info-section: fixed ooloo.io link * info-section: implemented unit tests * info-section: fixed linting errors * info-section: fixed linting errors * info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment) * info-section: commit after review * subreddit-form: initial commit. Setup folder structure * subreddit-form: implement tests * subreddit-form: fix lint error in Header.js * subreddit-form: completed unit and e2e tests * subreddit-form: fixes and cleanup after review * load-the-data: initial commit: added LoadTheData.js * load-the-data: fetching data implemented. But unit test and e2e test filing * load-the-data: troubleshooting tests * load-the-data: continue troubleshooting tests * load-the-data: fix linting error * load-the-data: fix the code to fetch top 500 posts * load-the-data: troubleshooting unit test - 'invalid json response body at reason: Unexpected end of JSON input' * load-the-data: integration test passing * load-the-data: refactor code after review. still 1 test to fix in SearchPage.js * laod-the-data: all tests pass * heatmap: first commit: setup heatmap table * heatmap: implemented heatmap architecture * heatmap: implemented user timezone * heatmap: implemented hover, highlit and timezone * heatmap: completed implementation - start testing * heatmap: refactor component structure - set test skeleton * heatmap: complete integration tests * heatmap: complete. fix user timezone in tests * heatmap: refactor code after review * heatmap: fix all test errors. ready to merge pr * heatmap: fix last test errors. ready to merge pr * posts-table: e2e tests passing * posts-table: 2 integration tests remaining * posts-table: resolved conflicts * posts-table: fix lint issue * posts-table: fix lint issue * posts-table: implemented posts sorted by time created * post-table: refactor after review * Final refactor: cleaned up tests and set background color to white * readme: add project readme * readme: made header menu responsive on mobile device * readme: made header menu responsive on mobile device: fixe error * readme: implemented cell with deleted author and cell background colr scheme selection * readme: implemented postsTable display in modal window * pre-deployment: clean up styling - added tootips * readme: Completed features integration tests * readme: Completed Cypress e2e tests * readme: refactor for responsive form and footer. Added to readme * readme: added to readme * readme: 2nd push after rebase. clean up and fixes
If you're using Webstom and your tests are still failing, install the package as specified in #477 (comment) and try adding |
DOM Testing Library
version: Using React Testing Lib Version: ^10.0.0node
version: v12.13.1npm
(oryarn
) version: 6.13.7Relevant code or config:
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:
The text was updated successfully, but these errors were encountered: