title: How to test component callback invoked by child component callback in React with Enzyme?
body: <p>Say I have the following application:</p>
  
  <pre><code>class Child extends React.Component {
      render() {
          return &lt;button onClick={this.handleChildOnClick}&gt;{this.props.children}&lt;/button&gt;;
      }
  
      handleChildOnClick() {
          this.props.onChildClick('foo');
      }
  }
  
  class Parent extends React.Component {
      render() {
          return &lt;Child onChildClick={this.handleParentOnClick}&gt;click me&lt;/Child&gt;;
      }
  
      handleParentOnClick(text) {
          this.props.onParentClick(12345);
      }
  }
  
  class App extends React.Component {
      render() {
          return &lt;Parent onParentClick={(num) =&gt; console.log(num)} /&gt;;
      }
  }
  </code></pre>
  
  <p>I'm having a hard time figuring out the proper way to test the <code>Parent</code> component. The <code>Child</code> and <code>App</code> one are not a problem, but the <code>Parent</code>...</p>
  
  <p>I mean, how do I test that a click on the <code>Child</code> component is going to invoke the <code>Parent</code> click callback without:</p>
  
  <ol>
  <li>...rendering <code>Child</code>. <code>Parent</code> should be tested in isolation as a shallow render. <code>Child</code> will also be tested in isolation and if I do a mount render, I'm basically testing the click callback on the <code>Child</code> twice.</li>
  <li>...directly invoking <code>handleParentOnClick</code> on the <code>Parent</code> instance. I shouldn't depend on the exact implementation of <code>Parent</code> for this. If I change the name of the callback function, the test will break and it could very well be a false positive.</li>
  </ol>
  
  <p>Is there a third option?</p>