react typescript testing TypeError: MutationObserver is not a constructor

user_4211297 0
Viewed 24251

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

jestjs typescript reactjs
5 Answers

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).

user_106008710

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.

user_35599670

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.

user_18127320

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
user_64635580

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"
    ...
  },
  ...
}
user_82858110
Related