反应打字稿测试 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"
  }
}

04-05-2020

推荐答案

您是否正在运行最新的 CRA?如果是这样，那么这个问题 https://github.com/facebook/create-react-app/pull/8362 可能就是您遇到的情况.这可以通过安装 https://www.npmjs.com/package/jest-environment 解决-jsdom-16，例如$ 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",
    ...
  },
  ...

本质上，你会告诉你的 jest 使用 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屋！