反应打字稿测试TypeError：MutationObserver不是构造函数

Question

上周我使用create-react 创建了一个 React 应用程序。

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

我想测试一下，这是我创建的测试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 不是构造函数

堆栈跟踪：

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)

我尝试了几种不同的样式和文本查询更改。源自样本here

This is the straight example i'm trying to get to work

我对添加垫片和回转装置犹豫不决，因为根据示例我不应该做任何这些。我想了解为什么该示例不起作用。

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

Answer 1

您正在运行最新的 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 并编辑您的测试脚本：

 ...
  "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）。

Answer 2

我也遇到了同样的问题。

在尝试接受的答案之前，我将react-scripts 更新为版本4.0.1。

这解决了问题，因为 react-scripts 4.0.1 使用 Jest 26.6.x。

因此，请先尝试升级react-scripts。

Answer 3

我在 Windows 上运行非常旧版本的 node.js 时遇到了这个问题。当我更新到节点版本12.16.3时，错误消失了。

Answer 4

这是我的场景：

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

出现错误：

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

但是当我更改testEnvironment 配置时：

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  // testEnvironment: 'enzyme',
  setupFilesAfterEnv: ['jest-enzyme'],
  setupFiles: ['./jest.setup.js'],
  testEnvironmentOptions: {
    enzymeAdapter: 'react16',
  },
};

测试通过：

 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

Answer 5

就我而言，我是从旧版本的 jest 更新的，并且必须确保在 package.json 中包含适当的测试环境，因为没有设置：

{
  ...
  "scripts": {
    ...
    "test": "jest --env=jsdom"
    ...
  },
  ...
}