反应打字稿测试TypeError:MutationObserver不是构造函数 [英] react typescript testing TypeError: MutationObserver is not a constructor

问题描述

我上周用create-react创建了一个React应用.

I created a React app with create-react last week.

我有一个简单的表单，当我单击提交"时会显示一条消息.

I have a simple form that displays a message when I click submit.

我想测试它，这是我创建的测试 SampleForm.test.tsx :

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)))
});

我在waitFor时出错了

TypeError:MutationObserver不是构造函数

TypeError: MutationObserver is not a constructor

堆栈跟踪:

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

这是我试图开始工作的直接示例

我不愿意添加垫片和回转，因为根据该示例，我无需执行任何操作.我想了解为什么该示例不起作用.

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.

我的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"
  }
}

2020年4月5日

推荐答案

您是否正在运行最新的CRA?如果是这样，则此问题 https://github.com/facebook/create-react- app/pull/8362 可能就是您遇到的问题.通过安装> https://www.npmjs.com/package/jest-environment即可解决-jsdom-sixteen ，例如$ yarn add -D jest-environment-jsdom-sixteen并编辑您的测试脚本:

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

本质上，您将告诉您的玩笑使用jsdom v16而不是v15(Jest v25的默认设置).

Essentially you will tell your jest to use jsdom v16 instead of v15(default for Jest v25).

这篇关于反应打字稿测试TypeError:MutationObserver不是构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！