react typescript testing TypeError: MutationObserver는 컨스트럭터가 아닙니다.

react typescript testing TypeError: MutationObserver는 컨스트럭터가 아닙니다.

리액트 앱을 만들었습니다.create-react저번주.

[ Submit ]를 클릭하면 메시지가 표시되는 간단한 폼이 있습니다.

테스트하고 싶습니다.이것은 제가 작성한 테스트입니다.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)

스타일과 텍스트 쿼리의 여러 가지 다른 변경을 시도했습니다.여기 샘플에서 파생되었습니다.

이게 바로 내가 일을 시작하려는 정확한 예야

예를 들어 심과 회전을 추가할 필요가 없기 때문에 망설이고 있습니다.나는 왜 그 예가 효과가 없는지 이해하고 싶다.

나의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/2011

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

기본적으로 v15 대신 jsdom v16을 사용하도록 농담을 전달합니다(Jest v25의 경우 기본값).

저도 같은 문제에 직면했습니다.

수락된 답변을 시도하기 전에 업데이트했습니다.react-scripts버전 변경4.0.1.

그게 문제를 해결했어요, 왜냐하면react-scripts 4.0.1Jest 사용26.6.x.

따라서 업그레이드를 시도합니다.react-scripts첫번째.

이 문제는 Windows에서 매우 오래된 버전의 node.js를 실행하고 있을 때 발생했습니다.노드 버전 12.16.3으로 업데이트 했을 때 오류가 사라졌습니다.

이건 내 장면이야

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

내 경우, 이전 버전의 농담에서 업데이트 중이었고 적절한 테스트 환경을 반드시 포함시켜야 했습니다.package.json설정되어 있지 않기 때문에:

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

언급URL : https://stackoverflow.com/questions/61036156/react-typescript-testing-typeerror-mutationobserver-is-not-a-constructor