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