无法从 'node_modules/@testing-library/react/dist/pure.js' 中找到模块 'react-dom/client'

Question

希望有人能在这里帮助我。

而运行 npm 测试出现以下错误

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 React from "react";
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

几天来一直试图解决这个问题... 预先感谢您的帮助

P.S.Additionally 提供我的 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"
  }
}

Answer 1

我想是因为你的@testing-library/react使用的是较新的版本，用12.1.2

的版本测试一下

Answer 2

我可以确认将库从 13.0.0 降级到 12.0.4 对 React 17.0.2 有效。

Answer 3

我也收到错误“找不到模块 'react-dom/client'”，但没有提到 @testing-library/react。

连接 react-redux 提供程序的语法似乎已在此处更改： https://react-redux.js.org/introduction/getting-started （在提到“// React 18”的代码块中）。

为了让它工作，我必须确保我使用的是 18 或更高版本的 React 和 react-dom，并且也更新了所有其他客户端 npm 包。许多需要更新： npm 更新 package-name --legacy-peer-deps

我花了几个小时才弄明白。希望对大家有帮助！

Answer 4

根据 @testing-library/react release notes，version 13（及以上）放弃了对 React 17 和以下的支持。因此，将此库与 React <= 17 一起使用会导致此错误（或其他错误）。

您可以降级到 13 以下的任何 @testing-library/react 版本来修复它。在撰写本文时，最新版本是 12.1.5，它可以与 React 17.

配合使用

另一种选择是将 React 升级到 18 及以上。

无法从 'node_modules/@testing-library/react/dist/pure.js' 中找到模块 'react-dom/client'

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

unit-testing

typescript

reactjs