title: How to unit test a react event handler that contains history.push using Jest and Enzyme?
body: <p>Given a simple component:</p>
  
  <pre><code>export default class SearchForm extends Component {
    constructor(props) {
      super(props)
      this.state = { query: '' }
    }
    onSubmit = (event) =&gt; {
      event.preventDefault()
      history.push(`/results/${this.state.query}`, { query: this.state.query })
    }
    render() {
      return (
        &lt;form onSubmit={this.onSubmit}&gt;
          &lt;input
            type="text"
            value={this.state.query}
            onChange={event =&gt; this.setState({ query: event.target.value })}
          /&gt;
          &lt;button&gt;Search&lt;/button&gt;
        &lt;/form&gt;
      )
    }
  }
  </code></pre>
  
  <p>And the test:</p>
  
  <pre><code>describe('SearchForm Component', () =&gt; {
    it('should navigate to results/query when submitted', () =&gt; {
      const wrapper = shallow(&lt;SearchForm /&gt;)
      ...?
    })
  })
  </code></pre>
  
  <p>How do you verify that form submission is taking the user to the next page with the correct query value?</p>
  
  <p>I've tried simply mocking the onSubmit handler and at least confirming that it's been called, but this results in a security error due to <code>history.push</code>.</p>
  
  <pre><code>const wrapper = shallow(&lt;SearchForm /&gt;)
  const mockedEvent = { target: {}, preventDefault: () =&gt; {} }
  const spy = jest.spyOn(wrapper.instance(), 'onSubmit')
  wrapper.find('form').simulate('submit', mockedEvent)
  expect(spy).toHaveBeenCalled()
  </code></pre>