title: Unit testing React click outside component
body: <p>Using the code from <a href="https://stackoverflow.com/a/42234988/766958">this answer</a> to solve clicking outside of a component:</p>
  
  <pre><code>componentDidMount() {
      document.addEventListener('mousedown', this.handleClickOutside);
  }
  
  componentWillUnmount() {
      document.removeEventListener('mousedown', this.handleClickOutside);
  }
  
  setWrapperRef(node) {
      this.wrapperRef = node;
  }
  
  handleClickOutside(event) {
      if (this.wrapperRef &amp;&amp; !this.wrapperRef.contains(event.target)) {
          this.props.actions.something() // Eg. closes modal
      }
  }
  </code></pre>
  
  <p>I can't figure out how to unit test the unhappy path so the alert isn't run, what i've got so far:</p>
  
  <pre><code>it('Handles click outside of component', () =&gt; {
    props = {
      actions: {
        something: jest.fn(),
      }
    }
    const wrapper = mount(
      &lt;Component {... props} /&gt;,
    )
    expect(props.actions.something.mock.calls.length).toBe(0)
  
    // Happy path should trigger mock
  
    wrapper.instance().handleClick({
      target: 'outside',
    })
  
    expect(props.actions.something.mock.calls.length).toBe(1)  //true
  
    // Unhappy path should not trigger mock here ???
  
    expect(props.actions.something.mock.calls.length).toBe(1)
  })
  </code></pre>
  
  <p>I've tried:</p>
  
  <ul>
  <li>sending through <code>wrapper.html()</code></li>
  <li><code>.find</code>ing a node and sending through (doesn't mock a <code>event.target</code>)</li>
  <li><code>.simulate</code>ing <code>click</code> on an element inside (doesn't trigger event listener)</li>
  </ul>
  
  <p>I'm sure i'm missing something small but I couldn't find an example of this anywhere.</p>