title: How can I test a modal inside of a React Portal using React Testing Library?
body: <p>I'm trying to test my <code>Modal</code> component with React Testing Library. The Modal is rendered inside of a React Portal. Now when I try to match my <code>Modal</code> with a snapshot the snapshot gets rendered as an empty div.</p>
  <pre><code>test('The component should render in body when open', () =&gt; {
      const {container} = render(
          &lt;Modal&gt;
              &lt;div&gt;My dialog content&lt;/div&gt;
          &lt;/Modal&gt;
      );
  
      expect(container).toMatchSnapshot();
  });
  </code></pre>
  <p>The snapshot I get looks like this:</p>
  <pre><code>exports[`The component should render in body when open 1`] = `&lt;div /&gt;`;
  </code></pre>
  <p>I've seen a few workarounds for instance passing <code>{container: document.body}</code> as a second argument to the <code>render()</code> function. But nothing really worked.</p>
  <p>Also I cannot query for any elements via <code>container</code>. It always returns <code>null</code>.</p>
  <pre><code>const dialog = container.querySelector(&quot;.modal&quot;);
  console.log(dialog); // null
  </code></pre>