React 테스트 라이브러리에서 React 18의 ReactDOM.render에 대한 콘솔 오류가 표시됩니다.

React 테스트 라이브러리에서 React 18의 ReactDOM.render에 대한 콘솔 오류가 표시됩니다.

React 18로 업데이트하거나 새로운 React 18 앱을 만든 후create-react-app를 실행하면yarn test명령어를 사용하면console.error각각의 경고로서render모든 테스트에서 사용되는 방법:

console.에러
경고: ReactDOM.render는 React 18에서 지원되지 않습니다.대신 createRoot를 사용합니다.새로운 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 동작합니다.상세: https://reactjs.org/link/switch-to-createroot

스크린샷과 같이:

현재 리액트 테스트 라이브러리는 리액트 18 방법론을 지원하지 않는 것으로 보입니다.

반응 테스트 라이브러리 오류를 해결하려면:

"ReactDOM.render is no longer supported in React 18, update the version of the react testing library."

프로젝트의 루트 디렉터리에서 터미널을 열고 다음 명령을 실행합니다.

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.displaces를 표시합니다.

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>
);

이제 오류 없이 테스트를 시작할 수 있습니다.

App.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();
});

몇 가지 발견과 React Testing Library의 문서를 읽은 후, 나는 정확한 관련 경고를 억제함으로써 당분간 문제를 해결할 수 있었다.ReactDOM.render is no longer supported in React 18.

이 경고를 억제하기 위해setupTests.ts에 있는 파일src이 경고 억제의 일부를 다음과 같이 기술합니다.

import '@testing-library/jest-dom';
    
//***Add This***
const originalError = console.error;
beforeAll(() => {
  console.error = (...args) => {
    if (/Warning: ReactDOM.render is no longer supported in React 18./.test(args[0])) {
      return;
    }
    originalError.call(console, ...args);
  };
});

afterAll(() => {
  console.error = originalError;
});

그러면 문제가 해결되고 경고가 표시되지 않습니다.

모든 라이브러리를 빠르게 업데이트하려면 다음 명령을 사용할 수 있습니다.

1. 새로운 메이저버전으로 갱신할 경우:npm install -g npm-check-updates
2. 패키지 버전 업그레이드json:ncu -u
3. 또는 npm 설치(프로젝트가 node_install이 아닌 경우):npm update

언급URL : https://stackoverflow.com/questions/71685441/react-testing-library-gives-console-error-for-reactdom-render-in-react-18