title: Testing ReactJS component methods with enzyme shallow - function returns undefined instead of true
body: <p>I have a component with the following method that calls a function set via props:</p>
  
  <pre><code>    class OrderDish extends Component {
          static propTypes = {
              image: React.PropTypes.any,
              order: React.PropTypes.object.isRequired,
              removeFromOrder: React.PropTypes.func,
              addCommentToOrder: React.PropTypes.func,
              canOrder: React.PropTypes.bool
          };
  
      handleKeyPress = (e) =&gt; {
          if (e.key === 'Enter') {
              this.props.addCommentToOrder(e.target.value, this.props.order, true);
          }
      };
  
      render() {
          const { order, canOrder } = this.props;
          return (
              &lt;div className="Order-dish"&gt;
                  &lt;div className="Order"&gt;
                      &lt;div className="Order-extra-info"&gt;
                          &lt;TextField
                              className='Order-dish-comment'
                              ref="comment"
                              id={order.entry.type}
                              value={order.comment ? order.comment : ''}
                              onChange={this.handleCommentChange}
                              fullWidth
                              onKeyDown={this.handleKeyPress}
                              disabled={!canOrder}
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default OrderDish;
  </code></pre>
  
  <p>Now the first thing that I would like to test is the method itself - if I pass in the <code>key: 'Enter'</code>, will it try to call the <code>addCommentToOrder</code> prop?</p>
  
  <p>So I made a <a href="https://facebook.github.io/jest/docs/api.html#jestfnimplementation" rel="nofollow noreferrer">mock function</a> with jest that returns true, and tried to pass it as a prop, then <a href="https://github.com/airbnb/enzyme/issues/208" rel="nofollow noreferrer">call the method</a> and see what happens:</p>
  
  <pre><code>it('Test field should call handleKeyPress on key down', () =&gt; {
      const mockKeyPressFN = jest.fn(() =&gt; { return true; });
      let orderDish = shallow(&lt;OrderDish order={mockOrder} addCommentToOrder={mockKeyPressFN}/&gt;);
      expect(orderDish.instance().handleKeyPress({key: 'Enter', target: {value: 'mock'}})).toBe(true);
    });
  </code></pre>
  
  <p>But my test fails with the following output:</p>
  
  <blockquote>
  <pre><code>expect(received).toBe(expected)
  
  Expected value to be (using ===):
    true
  Received:
    undefined
  </code></pre>
  </blockquote>
  
  <pre><code>console.log(orderDish.instance());
  </code></pre>
  
  <p>Returns the method as a function:</p>
  
  <pre><code>handleKeyPress: [Function]
  </code></pre>
  
  <p>This:</p>
  
  <pre><code>console.log(orderDish.instance().handleKeyPress({key: 'Enter', target:{value: 'mock'}}));
  </code></pre>
  
  <p>Does not log anything.</p>
  
  <p>What am I doing wrong?</p>