Unit testing React click outside component

Question

Using the code from this answer to solve clicking outside of a component:

componentDidMount() {     document.addEventListener('mousedown', this.handleClickOutside); }  componentWillUnmount() {     document.removeEventListener('mousedown', this.handleClickOutside); }  setWrapperRef(node) {     this.wrapperRef = node; }  handleClickOutside(event) {     if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {         this.props.actions.something() // Eg. closes modal     } } 

I can't figure out how to unit test the unhappy path so the alert isn't run, what i've got so far:

it('Handles click outside of component', () => {   props = {     actions: {       something: jest.fn(),     }   }   const wrapper = mount(     <Component {... props} />,   )   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) }) 

I've tried:

• sending through wrapper.html()
• .finding a node and sending through (doesn't mock a event.target)
• .simulateing click on an element inside (doesn't trigger event listener)

I'm sure i'm missing something small but I couldn't find an example of this anywhere.

Answer 1

import { mount } from 'enzyme' import React from 'react' import ReactDOM from 'react-dom'  it('Should not call action on click inside the component', () => {   const map = {}    document.addEventListener = jest.fn((event, cb) => {     map[event] = cb   })    const props = {     actions: {       something: jest.fn(),     }   }    const wrapper = mount(<Component {... props} />)    map.mousedown({     target: ReactDOM.findDOMNode(wrapper.instance()),   })    expect(props.actions.something).not.toHaveBeenCalled() }) 

The solution from this enzyme issue on github.