title: React, Jest and Material-UI: How to test for content rendered in a modal or popover
body: <p>There are a few material-ui components that do not render their results in the same place as the component is placed by their parent. Among these we have the <code>Dialog</code>, <code>Menu</code>, etc.</p>
  
  <p>This makes it apparently impossible to test for their content's presence in a jest.js wrapper with some parent component mounted in it.</p>
  
  <p>For example given the following component:</p>
  
  <pre><code>class DropdownMenu extends React.Component {
    onButtonClick = (e) =&gt; {
      this.setState({ open: true, anchorEl: e.currentTarget });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Button onClick={this.onButtonClick}&gt;Menu&lt;/Button&gt;
          &lt;Menu
            open={this.state.open}
            onRequestClose={() =&gt; this.setState({ open: false })}
          &gt;
            &lt;MenuItem label="Home" /&gt;
            &lt;MenuItem label="Sign in" /&gt;
          &lt;/Menu&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>This test fails even though it should intuitively work:</p>
  
  <pre><code>it('renders some menu items', () =&gt; {
    const wrapper = mount(&lt;AppMenu /&gt;);
    expect(wrapper).toContainReact(&lt;MenuItem label="Home" /&gt;);
  });
  </code></pre>
  
  <p>And this is Jest's output of the failure:</p>
  
  <pre><code>renders some menu items
  
  Expected &lt;AppMenu&gt; to contain &lt;withStyles(MenuItem) className="MenuItem" component={{...}} to={{...}}&gt;Home&lt;/withStyles(MenuItem)&gt; but it was not found.
  HTML Output of &lt;AppMenu&gt;:
   &lt;div&gt;&lt;button tabindex="0" class="MuiButtonBase-root-3477017037 MuiButton-root-3294871568 MuiButton-flatContrast-53993421" type="button" role="button" aria-owns="simple-menu" aria-haspopup="true"&gt;&lt;span class="MuiButton-label-49836587"&gt;Menu&lt;/span&gt;&lt;span class="MuiTouchRipple-root-3868442396"&gt;&lt;/span&gt;&lt;/button&gt;&lt;!-- react-empty: 5 --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>As you can see, it's like if all that was rendered was the <code>&lt;Button&gt;</code>. And indeed, when you render the above component in a browser, and you expand the menu and inspect it's menu item elements, they are rendered elsewhere in the DOM, not within or even near the place where the button appears. They are in fact rendered inside a div <code>&lt;body&gt;&lt;div data-mui-portal="true"&gt; ... &lt;/div&gt;</code> directly under the document's <code>&lt;body&gt;</code> element.</p>
  
  <p>So how can this menu contents be tested?</p>