title: How to test enzyme components that render into the top level
body: <p>I'm trying to test a component that renders a <a href="https://github.com/grommet/grommet" rel="nofollow noreferrer">grommet</a> <code>Menu</code> component. The grommet<code>Menu</code> component renders an absolutely positioned menu into the top level of the document, inserted as a child to <code>body</code>. Therefore it renders outside the scope of the wrapper. I can find it with <code>document.body.innerHTML</code> (referencing jsdom document) but I want to interact with it using enzyme. Any recommendations?</p>
  
  <p>My Test:</p>
  
  <pre><code>const wrapper = mount(
      &lt;MyComponent checkThis={checkThisSpy} /&gt;
  );
  wrapper.find('.spec-menu').simulate('click');
  console.log(document.body.innerHTML); // Shows the absolute menu inserted into the body
  </code></pre>
  
  <p>The line in grommet that does this <code>document.body.insertBefore(drop.container, document.body.firstChild);</code>. <a href="https://github.com/grommet/grommet/blob/master/src/js/utils/Drop.js#L197" rel="nofollow noreferrer">https://github.com/grommet/grommet/blob/master/src/js/utils/Drop.js#L197</a></p>
  
  <p>Just looking for some guidance on the best way to handle this. Thanks!</p>