从“node_modules/@testing-library/react/dist/pure.js”中找不到模块“react-dom/client”

Question

希望有人可以在这里帮助我。

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

试图解决这个问题几天...... 提前感谢您的任何帮助

P.S.另外提供我的 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

根据@testing-library/react release notes，version 13（及以上）已放弃支持对React 17 和以下内容。所以将这个库与React <= 17 一起使用会导致这个错误（或者可能是其他错误）。

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

另一个选择是将 React 升级到 18 及更高版本。

Answer 3

我可以确认将 lib 从 13.0.0 降级到 12.0.4 可以解决 react 17.0.2 的问题。

Answer 4

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

看起来连接 react-redux Provider 的语法在这里发生了变化： https://react-redux.js.org/introduction/getting-started （在代码块中提到“// As of React 18”）。

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

我花了几个小时才弄明白。希望它可以帮助某人！

Answer 5

如果您最近更新过 npm 8.5+ 并使用工作区，您可能需要以下内容，以便 Jest 可以找到您的模块。

具体看下面的moduleDirectories键。

{
    verbose: true,
    testEnvironment: "jsdom",
    moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
    moduleDirectories: [
        // Look in current directory node_modules
        path.resolve(__dirname, "node_modules"),
        // Look in parent workspace node_modules
        path.resolve(__dirname, "../node_modules"),
    ],
    moduleNameMapper: {
        ...moduleNameMapper,
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        '\\.svg$': '<rootDir>/__mocks__/svgrMock.tsx',
        "\\.(css)$": "identity-obj-proxy"
    },
    transform: {
        "^.+\\.tsx?$": "ts-jest"
    },
};