title: react typescript testing TypeError: MutationObserver is not a constructor
body: <p>I created a React app with <code>create-react</code> last week.</p>
  
  <p>I have a simple form that displays a message when I click submit.</p>
  
  <p>I would like to test it, this is the test i created <strong>SampleForm.test.tsx</strong>: </p>
  
  <pre><code>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 () =&gt; {
      const str = "THIS DIDNT DO ANYTHING";
      const { container, getByText, findByText } = render(&lt;SampleForm /&gt;);
  
      fireEvent.click(screen.getByText("Submit"));
  
      await waitFor(() =&gt; expect(screen.getByText(str)))
  });
  </code></pre>
  
  <p>I'm getting an error at <code>waitFor</code></p>
  
  <blockquote>
    <p>TypeError: MutationObserver is not a constructor</p>
  </blockquote>
  
  <p><strong>stack trace:</strong></p>
  
  <pre><code>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.&lt;anonymous&gt; (src/components/SampleForm.test.tsx:18:11)
  </code></pre>
  
  <p>I have tried several different alterations of the style and text querying. Derived off of the samples <a href="https://testing-library.com/" rel="noreferrer">here</a></p>
  
  <p><a href="https://testing-library.com/docs/react-testing-library/example-intro" rel="noreferrer">This is the straight example i'm trying to get to work</a></p>
  
  <p>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.</p>
  
  <p>My <code>package.json</code>:</p>
  
  <pre><code>{
    "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": [
        "&gt;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"
    }
  }
  </code></pre>
  
  <p>edits: 04-05-2020</p>