How to test component callback invoked by child component callback in React with Enzyme? : <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>
