'node_modules/@testing-library/react/dist/pure.js'에서 'react-dom/client' 모듈을 찾을 수 없습니다.

'node_modules/@testing-library/react/dist/pure.js'에서 'react-dom/client' 모듈을 찾을 수 없습니다.

실행 중npm test다음 오류가 발생하였습니다.

Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
Required stack:
node_modules/@testing-library/react/dist/pure.js
node_modules/@testing-library/react/dist/index.js

필요한 패키지는 모두 인스톨 되어 있는 것 같습니다.재인스톨 했습니다.react-dom,하지만 소용이 없어.아래는 테스트 파일에 사용된 Import를 제공합니다.

import React from "react";
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

추가 정보 제공package.json:

{
  "name": "fe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fontsource/roboto": "^4.5.3",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.5.0",
    "@mui/material": "5.5.3",
    "@mui/styles": "^5.5.1",
    "@reduxjs/toolkit": "^1.8.0",
    "@testing-library/jest-dom": "5.16.3",
    "@testing-library/react": "13.0.0",
    "@testing-library/user-event": "14.0.4",
    "axios": "^0.26.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.28.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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/jest": "^27.4.0",
    "@types/node": "^16.11.25",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "@types/styled-components": "^5.1.24",
    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@typescript-eslint/parser": "^5.12.0",
    "eslint": "^8.9.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.4.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "prettier": "2.5.1",
    "typescript": "^4.5.5"
  }
}

새로운 버전을 사용하여 @testing-library/react를 실행했기 때문에 12.1.2 버전으로 테스트만 하면 됩니다.

@testing-library/react 릴리즈 노트에 따르면version 13(및 그 이상)는 에 대한 지원을 중단했습니다.React 17고함을 지르다.이 라이브러리를 사용하여React <= 17이 에러(또는 다른 에러)의 원인이 됩니다.

의 모든 버전으로 다운그레이드 할 수 있습니다.@testing-library/react13번을 외쳐 고정합니다.이 글을 쓸 때 가장 최근의 것은12.1.5와 잘 어울린다.React 17.

다른 옵션은 React를 18 이상으로 업그레이드하는 것입니다.

@testing-library/react에 대한 언급 없이 "Cannot find module 'react-dom/client'라는 오류도 표시되었습니다.

react-provider를 연결하기 위한 구문이 여기서 변경된 것 같습니다.https://react-redux.js.org/introduction/getting-started (코드 블록에 "//As of React 18"이라고 기재되어 있습니다).

이 기능을 이용하려면 리액트 및 리액트돔 버전 18 이상인지 확인하고 다른 모든 클라이언트 npm 패키지도 업데이트해야 했습니다.많은 부분을 다음과 같이 업데이트해야 했습니다.

npm update package-name --legacy-peer-deps

이걸 알아내는데 몇 시간이 걸렸어요누군가 도움이 되었으면 좋겠다!

언급URL : https://stackoverflow.com/questions/71713405/cannot-find-module-react-dom-client-from-node-modules-testing-library-react