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>
`
})