React Testing库给出了ReactDom的控制台错误。

Question

在更新了React 18或从创建新的React 18应用程序后，当我运行 YARN TEST 命令时，它给出了 Console.error 作为渲染在任何测试中使用的方法的警告：

Console.Error
警告：ReactDom.Render不再支持React 18中的支持。改用Croteroot。在您切换到新的API之前，您的应用程序将表现得好像正在运行17。 ：//reactjs.org/link/switch-to-createroot

如屏幕截图：

作为React测试库似乎不支持React 18方法论。

Answer 1

解决react测试库错误：

“ReactDOM.render在React 18中不再支持，请更新react测试库的版本。”

在项目的根目录中打开终端并运行以下命令：

npm install --save-dev @testing-library/react@latest
npm install --save-dev @testing-library/jest-dom@latest
npm install --save-dev @testing-library/user-event@latest

确保更新您正在使用的所有反应测试库包的版本。

您的index.js 文件应使用新的createRoot API 来呈现您的应用程序。

index.js

import React from 'react';
import ReactDOM from "react-dom/client";

import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

现在您应该能够开始测试而不会出现错误。

应用程序.test.js

import {render, screen} from '@testing-library/react';
import App from './App';

test('renders react component', () => {
  render(<App />);
  const divElement = screen.getByText(/hello world/i);
  expect(divElement).toBeInTheDocument();
});

Answer 2

卸载 @testing-library/react-hook 并从 @testing-library/react 导入 renderHook

import { renderHook } from "@testing-library/react";

请参阅此处 https://github.com/testing-library/react-hooks-testing-library/issues/826#issuecomment-1100650242

Answer 3

有关所有库的快速更新，您可以使用下一个命令：

1. 要更新到新的主要版本：
   npm install -g npm-check-updates
2. package.json中的升级版本：
   NCU -U
3. 或NPM安装，以防您的项目没有node_modules：
   NPM Update