I am writing a test for a module that uses react-modal to open a modal. React-modal requires that you set the root element for accessibility reasons.

if (typeof document != "undefined") {
  Modal.setAppElement("#root");
}

This however causes an error in tests: “Error: react-modal: No elements were found for selector #root.”

I want to mock the function setAppElement in react-modal, but I am obviously missing something because my attempts are not making any difference. If anyone could point out what I’m doing wrong (or any other solution I could do within the test), that would be greatly appreciated.

describe("CustomModal", () => {
  vi.mock("react-modal", async () => {
    const actual = await vi.importActual("react-modal");
    return { ...actual, setAppElement: () => {} };
  });

  it("Renders successfully", () => {
    render(
        <CustomModal />
    );
  });
});