title: Can't close a modal menu through enzyme
body: <p>the problem is pretty straightforward. I have a material-ui menu I would like to test closes appropriately (through a user clicking outside of the menu).</p>
  
  <p>This has proven to be quite challenging. Here's the component (ripped right from the <a href="https://material-ui.com/demos/menus/" rel="nofollow noreferrer">the docs</a>):</p>
  
  <pre><code>class App extends React.Component {
    state = {
      anchorEl: null
    };
  
    handleClick = event =&gt; {
      this.setState({ anchorEl: event.currentTarget });
    };
  
    handleClose = () =&gt; {
      this.setState({ anchorEl: null });
    };
  
    render() {
      const { anchorEl } = this.state;
  
      return (
        &lt;div&gt;
          &lt;Typography variant="body1"&gt; Click Me&lt;/Typography&gt;
          &lt;Button
            aria-owns={anchorEl ? "simple-menu" : undefined}
            aria-haspopup="true"
            onClick={this.handleClick}
          &gt;
            Open Menu
          &lt;/Button&gt;
          &lt;Menu
            id="simple-menu"
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={this.handleClose}
          &gt;
            &lt;MenuItem onClick={this.handleClose}&gt;Profile&lt;/MenuItem&gt;
            &lt;MenuItem onClick={this.handleClose}&gt;My account&lt;/MenuItem&gt;
            &lt;MenuItem onClick={this.handleClose}&gt;Logout&lt;/MenuItem&gt;
          &lt;/Menu&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And the tests: </p>
  
  <pre><code>const props = {
    classes: {}
  };
  
  describe("test", () =&gt; {
    it("closes the menu", () =&gt; {
      const wrapper = mount(&lt;App {...props} /&gt;);
      wrapper.find(Button).simulate("click");
      expect(wrapper.find(Menu).prop("open")).toBe(true);
      wrapper.find(Typography).simulate("click");
      expect(wrapper.find(Menu).prop("open")).toBe(false);
      wrapper.unmount();
    });
  
    it("closes the menu a different way", () =&gt; {
      const outerNode = document.createElement("div");
      outerNode.setAttribute("id", "root-node");
      document.body.appendChild(outerNode);
      const wrapper = mount(&lt;App {...props} /&gt;, {
        attachTo: outerNode
      });
      wrapper.find(Button).simulate("click");
      expect(wrapper.find(Menu).prop("open")).toBe(true);
      outerNode.click();
      expect(wrapper.find(Menu).prop("open")).toBe(false);
      wrapper.unmount();
    });
  
    it("closes the menu yet a different way", () =&gt; {
      const eventMap = {};
      window.addEventListener = jest.fn((event, cb) =&gt; {
        eventMap[event] = cb;
      });
      const wrapper = mount(&lt;App {...props} /&gt;);
      wrapper.find(Button).simulate("click");
      expect(wrapper.find(Menu).prop("open")).toBe(true);
      wrapper.find(Typography).simulate("click");
      eventMap.click();
      expect(wrapper.find(Menu).prop("open")).toBe(false);
      wrapper.unmount();
    });
  });
  </code></pre>
  
  <p>None of these tests work, unfortunately. I was doing some digging and came across <a href="https://stackoverflow.com/questions/45046728/unit-testing-react-click-outside-component">this SO post</a> which links <a href="https://github.com/airbnb/enzyme/issues/426" rel="nofollow noreferrer">this github issue</a> where the solutions and third approaches originally came from, however, I can't get any of these to work.</p>
  
  <p>I created a CodeSandbox with the code below for any kind generous souls here who desire to help. </p>
  
  <p><a href="https://codesandbox.io/s/n3n96op120" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit n3n96op120"></a></p>