How to test enzyme components that render into the top level
<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>