I created a React app with create-react
last week.
I have a simple form that displays a message when I click submit.
I would like to test it, this is the test i created SampleForm.test.tsx:
import React from "react";
import { render, fireEvent, screen, waitFor } from "@testing-library/react";
import SampleForm from "./SampleForm";
import "@testing-library/jest-dom/extend-expect"
test("renders submits form", async () => {
const str = "THIS DIDNT DO ANYTHING";
const { container, getByText, findByText } = render(<SampleForm />);
fireEvent.click(screen.getByText("Submit"));
await waitFor(() => expect(screen.getByText(str)))
});
I'm getting an error at waitFor
TypeError: MutationObserver is not a constructor
stack trace:
at node_modules/@testing-library/dom/dist/wait-for.js:38:22
at waitFor (node_modules/@testing-library/dom/dist/wait-for.js:31:10)
at node_modules/@testing-library/dom/dist/wait-for.js:70:54
at node_modules/@testing-library/react/dist/pure.js:51:22
at node_modules/@testing-library/react/dist/act-compat.js:60:24
at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
at node_modules/@testing-library/react/dist/act-compat.js:59:20
at asyncAct (node_modules/@testing-library/react/dist/act-compat.js:38:14)
at Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:50:35)
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:70:35)
at Object.<anonymous> (src/components/SampleForm.test.tsx:18:11)
I have tried several different alterations of the style and text querying. Derived off of the samples here
This is the straight example i'm trying to get to work
I'm hesitant about adding shims and gyrations because according to the example I shouldn't have to do any of that. I'd like to understand why that example isn't working.
My package.json
:
{
"name": "intact",
"version": "0.1.0",
"private": true,
"dependencies": {
"@rjsf/core": "^2.0.0-alpha.6",
"@testing-library/jest-dom": "^5.3.0",
"@testing-library/react": "^10.0.2",
"@testing-library/user-event": "^10.0.1",
"@types/jest": "^25.1.5",
"@types/lodash": "^4.14.149",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-router-dom": "^5.1.3",
"bootstrap": "^4.4.1",
"lodash": "^4.17.15",
"msal": "^1.2.2",
"react": "^16.13.1",
"react-aad-msal": "^2.3.4",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/fs-extra": "^8.1.0",
"@types/node": "^13.11.0",
"@types/rimraf": "^3.0.0",
"fs-extra": "^9.0.0",
"rimraf": "^3.0.2",
"ts-node": "^8.8.1"
}
}
edits: 04-05-2020
Are you running latest CRA? If so then this issue https://github.com/facebook/create-react-app/pull/8362 might be what you're experiencing. That's solvable by installing https://www.npmjs.com/package/jest-environment-jsdom-sixteen, e.g. $ yarn add -D jest-environment-jsdom-sixteen
and editing your test script:
...
"scripts": {
...
- "test": "react-scripts test --env=dom"
+ "test": "react-scripts test --env=jest-environment-jsdom-sixteen"
...
},
...
"devDependencies": {
...
"jest-environment-jsdom-sixteen": "^1.0.3",
...
},
...
Essentially you will tell your jest to use jsdom v16 instead of v15(default for Jest v25).
I also faced the same issue.
Before trying the accepted answer, I updated react-scripts
to version 4.0.1
.
That solved the issue, because react-scripts 4.0.1
uses Jest 26.6.x
.
Therefore, try upgrading react-scripts
first.
I had this problem when I was running a very old version of node.js on Windows. When I updated to node version 12.16.3, the error disappeared.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With