title: How to assert a function is called from within another function?
body: <p>I have a component in React with an onChange event. In the code below, I need to assert that the correct method is called when </p>
  
  <pre><code>this.props.onChangeImage()
  </code></pre>
  
  <p>is invoked in the Gallery component.</p>
  
  <pre><code>export class Form extends React.PureComponent {
  
    componentDidMount = () =&gt; {
      this.props.getUser();
      this.props.getImages();
      this.props.getBoards();
    }
  
    render() {
      if (this.props.pin === null) {
        let boards = [];
        boards = this.props.boards;
        boards = boards.data.map(
          (item) =&gt; &lt;MenuItem key={item.id.toString()} value={item.name} primaryText={item.name} /&gt;
        );
        return (
          &lt;div&gt;
            &lt;Helmet
              title="Form"
              meta={[
                { name: 'description', content: 'Description of Form' },
              ]}
            /&gt;
            &lt;Gallery images={this.props.images} onChange={this.props.onChangeImage} /&gt;
          &lt;/div&gt;
        );
      }
      return (&lt;div className="spinner-container"&gt;&lt;CircularProgress /&gt;&lt;/div&gt;);
    }
  }
  </code></pre>
  
  <p>Below, in the onChangeImage method, I am trying to assert that the sendEventToParentWindow method is called.</p>
  
  <pre><code>function mapDispatchToProps(dispatch) {
    return {
  
      onChangeImage: (event) =&gt; {
        dispatch(createPinImage(event.target.value));
        sendEventToParentWindow({
          action: 'change-image',
          description: 'Change image',
        });
      },
    };
  }
  
  function sendEventToParentWindow(message) {
    window.postMessage(message, window.location.href);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Form);
  </code></pre>
  
  <p>I've looked at a number of answers here, and while this one seemed closest, it's not quite getting me there: <a href="https://stackoverflow.com/questions/40771520/jest-mocking-a-function-call">Jest - mocking a function call</a></p>
  
  <p>EDIT: Here is my test which I believe is wrong because it's assigning the mocked function to be called directly onChange when it really should be calling the function that in turn calls the mock. I need somehow to invoke the onImageChange function and then verify that my spy was called.</p>
  
  <pre><code>import Gallery from '../index';
  import * as formIndex from '../../../containers/Form';
  
  describe('&lt;Gallery /&gt;', () =&gt; {
    it('Expect sendMessageToParentWindow to be called on image change', () =&gt; {
      const sendEventToParentWindowMock = jest.spyOn(formIndex, 'sendEventToParentWindow');
      const gallery = shallow(&lt;Gallery images={imagesMockData} onChange={sendEventToParentWindowMock} /&gt;);
      gallery.find('input#image-1').simulate('change');
  
      expect(sendEventToParentWindowMock).toBeCalled();
    });
  }
  </code></pre>