En la aplicación de la versión react-18.0.0, estoy escribiendo un caso de prueba para el archivo index.js. Recibo el siguiente error
● La raíz de la aplicación › debería mostrarse sin bloquearse
TypeError: Cannot set property 'usingClientEntryPoint' of undefined 5 | import reportWebVitals from "./reportWebVitals"; 6 | > 7 | const root = ReactDOM.createRoot(document.getElementById("root")); | ^ 8 | 9 | root.render( 10 | <React.StrictMode>y Mi index.test.js
import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; jest.mock("react-dom", () => ({ render: jest.fn() })); describe("Application root", () => { it("should render without crashing", () => { const div = document.createElement("div"); div.id = "root"; document.body.appendChild(div); require("./index.js"); expect(ReactDOM.render).toHaveBeenCalledWith(<App />, div); }); });cómo solucionar el problema.
Como se está burlando de react-dom y dado que createRoot está expuesto desde react-dom/client , debería hacerlo de esta manera:
jest.mock("react-dom/client", () => ({ createRoot: jest.fn().mockImplementation(() => ({ render: jest.fn() })) })); describe('Application root', () => { it('should render without crashing', () => { // render your app here expect(renderFn).toHaveBeenCalled(); }); });