title: React-jest-enzyme: testing callback of child component that calls another function first before calling the callback
body: <p>I am testing wether a callback that is passed to a child component is called after my button in the child component is clicked. I simulate the react-bootstrap button, <code>&lt;Button&gt;&lt;/Button&gt;</code>, by using the <code>.simulate('click')</code> function. </p>
  
  <p>The problem is that the <code>onClick()</code> function of my button calls another function called <code>update()</code> and that function calls the <code>handleSave</code> callback passed to my child component. The <code>onKeyPress</code> function of the <code>&lt;FormControl/&gt;</code> element also calls the update function of my component. Here is how I have my child component setup: </p>
  
  <pre><code>    update(event) {              
  
         //Have to check to see if the key stroke is the enter key or if it comes from the button click.
         if(event.charCode === 13 || event.type === 'react-click'){
  
         // Have to use this get the ref value because this.refs.input.value doesn't work.
         var input = ReactDOM.findDOMNode(this.refs.input);
  
         input.value = '';
         this.props.handleSave();
     }
  }
  
  render(){
  
      return( 
         &lt;Form&gt;
           &lt;FormControl type="text" ref="input" onKeyPress={this.update.bind(this)} placeholder="Enter Note" /&gt;
           &lt;Button onClick={this.update.bind(this)}&gt;Submit &lt;/Button&gt;
         &lt;/Form&gt;
      )
  }
  </code></pre>
  
  <p>That is why my <code>update()</code> function has a check to see if came from <code>charCode==13</code>, that is the charCode for the enter key, or the button click because both save the info that is in the <code>&lt;FormControl /&gt;</code></p>
  
  <p>I have my test setup this way:</p>
  
  <pre><code>describe('Input', () =&gt; {
  
  const mockHandleText = jest.fn();
  const mockHandleSave = jest.fn();
  const props          = {handleSave: mockHandleSave}
  let input            = shallow(&lt;Input {...props} /&gt;);
  
     describe('when entering a note', () =&gt; {
  
      beforeEach(() =&gt; {
              input.find('Button').simulate('click', {
                  charCode: 13
              });
      });
  
  
      it('adds the note to state', () =&gt; {
          expect(props.handleSave).toHaveBeenCalled();
      });
    });
   });
  </code></pre>
  
  <p>A weird thing is that I have to pass an object as a second parameter to the <code>.simulate()</code> function because if I don't it will give me an error saying cannot read charCode of undefined but when a pass an object, the object doesn't even have to have an event property, then it just says </p>
  
  <p><code>expect(jest.fn()).toHaveBeenCalled() 
  Expected mock function to have been called.</code></p>
  
  <p>Also If I don't pass in the object with some property then it also breaks my other test that I have for a callback on the <code>onChange</code> function of my  element. I left it out of the code sample for the sake of simplicity and just uploaded the code that is giving me problems. I am also using a bootstrap form with  and  . The full code is on my github at github.com/Alebron23. </p>