title: Testing React Function was Called with Jest
body: <p>I have a React class which renders a child component called PersonalDetails. The code works fine, however I cannot get Jest to verify the saveData was called correctly when the Enter key is pressed in the field. I have mocked the saveData function passed to the PersonalDetails but the assertions fail (code condensed for brevity) on the mock:</p>
  
  <pre><code>class Home extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              name: null
          };    
          this.saveData = this.saveData.bind(this);
      }
  
      render() {        
          return (
              &lt;div&gt;
                  &lt;PersonalDetails name={this.state.name} saveData={this.saveData}/&gt;;
                  &lt;OtherThing saveData={this.saveData}/&gt;
              &lt;/div&gt;
          )
      }
  
      saveData(key, value){
          var d = {};
          d[key] = value;
          this.setState(d)
      }
  }
  </code></pre>
  
  <p>The PersonalDetails module is as follows:</p>
  
  <pre><code>class PersonalDetails extends React.Component {
  
      constructor(props) {
          super(props);
          this.handleNameChange = this.handleNameChange.bind(this);
      }
  
      render() {            
          return (
              &lt;div&gt;
                  &lt;input onKeyPress={this.handleNameChange}
                         defaultValue={this.props.name}/&gt;
              &lt;/div&gt;
          )
      }
  
      handleNameChange(event) {
          if (event.nativeEvent.keyCode != 13) return;
          this.props.saveData('name',event.target.value)
      }
  }
  </code></pre>
  
  <p>Jest test case in question:</p>
  
  <pre><code>it("saves data on change", function () {
  
      var saveData = jest.genMockFunction(); // mocking saveData
      const pdComponent = TestUtils.renderIntoDocument(
          &lt;PersonalDetails saveData={saveData} name="My Name"/&gt;
      );
  
      var input = TestUtils.findRenderedDOMComponentWithTag(
          pdComponent, 'input'
      );
  
      var node = ReactDOM.findDOMNode(input);
      node.value = "New Name"; // As per FB tests
      TestUtils.Simulate.change(node, {target: {value: "New Name"}});
      TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
      expect(node.value).toBe("New Name"); // Passes
      // Fails
      expect(pdComponent.props.saveData).toBeCalledWith("New Name");
      // Also Fails
      expect(saveData).toBeCalledWith("New Name");
  
  });
  </code></pre>
  
  <p>Any ideas what I'm missing here?</p>