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 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.
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.
This is my scene:
jest.config.js:
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'enzyme',
setupFilesAfterEnv: ['jest-enzyme'],
setupFiles: ['./jest.setup.js'],
testEnvironmentOptions: {
enzymeAdapter: 'react16',
},
};
package.json:
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"jest": "^26.6.3",
"jest-environment-enzyme": "^7.1.2",
"jest-enzyme": "^7.1.2",
"ts-jest": "^26.4.4",
"typescript": "^4.1.2"
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router-dom": "^5.2.0",
Got error:
TypeError: MutationObserver is not a constructor
9 | const { getByTestId } = render(<Login />);
10 | expect(getByTestId('getUrl').getAttribute('href')).toEqual('');
> 11 | const url = await waitFor(() => getByTestId('getUrl'));
But when I changed the testEnvironment configuration:
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
// testEnvironment: 'enzyme',
setupFilesAfterEnv: ['jest-enzyme'],
setupFiles: ['./jest.setup.js'],
testEnvironmentOptions: {
enzymeAdapter: 'react16',
},
};
The test passes:
PASS examples/65336283/LoginLink.test.tsx
65336283
✓ should display loginurl (23 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3 s, estimated 4 s
In my case, I was updating from an old version of jest and had to make sure to include the appropriate testing environment in package.json as none was set:
{
...
"scripts": {
...
"test": "jest --env=jsdom"
...
},
...
}