How to use react-modal from testing-library/react test

[jsoneaday]

When I run my Modal component inside of a testing-library test, which uses react-modal internally, I get this Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el}. I tried calling modal.setAppElement but that gives an error No elements were found for selector root. How can I run this without the warning? Here's my test.

it("loads on render", async () => {
    const mockStore = configureStore();
    const store = mockStore({
      profile: defaultDevProfile,
    });

    reactmodal.setAppElement("#root");
    const { container } = render(
      <div id="root">
        <ReduxProvider store={store}>
          <Modal isOpen={true} toggleOpen={() => {}}>
            <div>hello world</div>
          </Modal>
        </ReduxProvider>
      </div>
    );

    const rootElement = container.querySelector("#root");
    console.log("rootElement", rootElement?.id);
    screen.getByText("hello world");
  });

[diasbruno]

@jsoneaday when you call setAppElement before the render the #root element is not available yet.

In this case, appElement={el} will be recommended, or, you will need to prepare the document.body to have the correct elements, before rendering.

[diasbruno]

prepare the document.body to have the correct elements

I mean, use beforeEach with something like:

beforeEach(function() {
  document.body.innerHTML = `
<div id="root">
  <div id="app"></div>
  <div id="modals"></div>
</div>
`
})

[slavbar]

It's not ideal. But i don't care about appElement during the unit tests.

[aniruddhaadak80]

Hi there! Taking a look at your issue regarding How to use react-modal from testing-library/react test in the context of reactjs/react-modal...

For react-modal integration specifically, this typically happens due to how the modal mounts into the portal DOM node vs standard React tree flow.

1. App Element: Ensure you've called Modal.setAppElement('#root') early in your app lifecycle so accessibility features (like aria-hidden) perform correctly without throwing errors.
2. React 18/19 compatibility: If encountering strict mode double mounts or findDOMNode warnings, verify that you are leveraging modern standard refs (useRef) and check your test environment (e.g. jsdom) where Portal mounting behaves slightly differently than standard browsers.
3. Z-index and stacking: Always check the stacking context of the ReactModal__Overlay class if the modal is hidden behind other components.

Best of luck, and hope this guides you to the fix!