title: How to mock functions, and test that they're called, when passed as props in react components?
body: <p>I'm following the example from this stackoverflow answer - <a href="https://stackoverflow.com/questions/25533036/test-a-react-component-function-with-jest">Test a React Component function with Jest</a>. I have an example component and test set up. The component works correctly when loaded into App.js. </p>
  
  <p>Component - </p>
  
  <pre><code>import React, { PropTypes, Component } from 'react';
  
  export default class ExampleModule extends Component {
    static propTypes = {
      onAction: PropTypes.func,
    }
  
    static defaultProps = {
    onAction: () =&gt; { console.log("In onAction"); }
  }
  
  doAction = () =&gt; {
    // do something else
    console.log('In do action');
    this.props.onAction();
  }
  
  render() {
    return(
      &lt;div&gt;
        &lt;button className='action-btn' onClick=  {this.doAction.bind(this)}&gt;Do action&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  }
  </code></pre>
  
  <p>And here's the test - </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import TestUtils from 'react-addons-test-utils';
  import ExampleComponent from './ExampleModule.js';
  
  let Example;
  
  describe('Example component', function() {
    beforeEach(function() {
      Example = TestUtils.renderIntoDocument(&lt;ExampleComponent /&gt;);
    })
  
    it('calls props functions', function() {
      Example.doAction = jest.genMockFunction();
      let actionBtn = TestUtils.findRenderedDOMComponentWithClass(Example, 'action-btn');
      TestUtils.Simulate.click(actionBtn);
      expect(Example.doAction).toBeCalled();
    })
  
    it('doAction calls onAction', function() {
      expect(Example.props.onAction).not.toBeCalled();
      Example.doAction();
      expect(Example.props.onAction).toBeCalled();
    })
  })
  </code></pre>
  
  <p>However, I get the following error - </p>
  
  <pre><code>FAIL  src/App/components/Example/ExampleModule.test.js
    Console
  
      console.log src/App/components/Example/ExampleModule.js:14
        In do action
      console.log src/App/components/Example/ExampleModule.js:24
        In onAction
  
    Example component › calls props functions
  
      Expected the mock function to be called.
  
        at Object.&lt;anonymous&gt; (src/App/components/Example/ExampleModule.test.js:17:30)
        at process._tickCallback (node.js:369:9)
  
    Example component › doAction calls onAction
  
      toBeCalled matcher can only be used on a spy or mock function.
  
        at Object.&lt;anonymous&gt; (src/App/components/Example/ExampleModule.test.js:21:40)
        at process._tickCallback (node.js:369:9)
  </code></pre>
  
  <p>I can see the console.logs in the <code>doAction</code> and <code>onAction</code> are being called even when I want to mock out <code>doAction</code>. 
  Also, I'm unable to mock out <code>onAction</code>. I get this error - </p>
  
  <pre><code>TypeError: Cannot assign to read only property 'onAction' of #&lt;Object&gt;
  </code></pre>
  
  <p>I've tried <code>jest.fn()</code> but got the same errors. </p>
  
  <p>How do I mock these functions and test them?</p>
  
  <p>EDIT:</p>
  
  <p>I was able to mock <code>doAction</code> by using jest.fn() in the following way - </p>
  
  <pre><code>let mockFn = jest.fn();
  Example.doAction = mockFn()
  </code></pre>
  
  <p>However, I'm still unable to mock <code>Example.props.onAction</code>.</p>