TypeError: Cannot set property 'usingClientEntryPoint' of undefined

Question

In react-18.0.0 version app I'm writing test case for index.js file I'm getting following error

● Application root › should render without crashing

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>

and My 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);
  });
});

how to fix the issue.

Answer 1

As you are mocking react-dom and since createRoot is exposed from react-dom/client, you would need to do this way instead:

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