0
670
VisualizaçõesReact Testing Library da error de consola para ReactDOM.render en React 18
Después de actualizar a React 18 o crear una nueva aplicación React 18 desde create-react-app , cuando ejecuto el comando de yarn test , aparece un error de console.error como advertencia para cada uno de los métodos de render utilizados en cualquiera de las pruebas como:
console.error Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot Como se ve en la captura de pantalla: 
Como React Testing Library no parece ser compatible con la metodología React 18 a partir de ahora.
3 Respostas
Responde à pergunta0
Para resolver el error de la biblioteca de pruebas de reacción "ReactDOM.render ya no es compatible con React 18", actualice la versión de la biblioteca de pruebas de reacción.
Abra su terminal en el directorio raíz de su proyecto y ejecute los siguientes comandos:
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
Asegúrese de actualizar las versiones de todos los paquetes de la biblioteca de pruebas de reacción que está utilizando.
Su archivo index.js debe usar la nueva API createRoot para representar su aplicación.
índice.js
import React from 'react'; import ReactDOM from "react-dom/client"; import App from './App'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <StrictMode> <App /> </StrictMode> );Ahora debería poder comenzar sus pruebas sin obtener el error.
Aplicación.prueba.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(); });0
Después de algunos hallazgos y leyendo los documentos de React Testing Library , pude resolver el problema por el momento suprimiendo la advertencia relacionada precisamente con ReactDOM.render is no longer supported in React 18.
Para suprimir esta advertencia, puede actualizar el archivo setupTests.ts presente en su directorio src y escribir el fragmento de esta supresión de advertencia de la siguiente manera:
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; });Esto debería resolver el problema y suprimir las advertencias.
0
Para una actualización rápida de todas las bibliotecas, puede usar los siguientes comandos:
- npm install -g npm-check-updates (para actualizar a la nueva versión principal)
- ncu -u (versiones de actualización en package.json)
- actualización de npm (o instalación de npm, en caso de que su proyecto no tenga node_modules)