title: ReactJS: Testing components containing components
body: <p>I use Jest to test my React Components. However, I have no idea (or haven't seen anything) how to test components that pass (as prop) on methods to sub components. For instance, I have: <code>Form</code>, <code>MemberList</code>, <code>Member</code>, <code>FormButton</code>. Something similar to this in code:</p>
  
  <p><strong>Form:</strong></p>
  
  <pre><code>&lt;MemberList members={this.state.members} remove={this.remove} add={this.add} /&gt;
  &lt;FormButton data={this.state.members} /&gt;
  </code></pre>
  
  <p><strong>MemberList:</strong></p>
  
  <pre><code>&lt;span onClick={this.add}&gt; &lt;!-- add button --&gt; &lt;/span&gt;
  {this.props.members.map(function(member, index) {
    &lt;Member key={index} data={member} remove={this.props.remove} /&gt;
  })}
  </code></pre>
  
  <p><strong>Member:</strong></p>
  
  <pre><code>// some input like name and so, and a remove itself button.
  </code></pre>
  
  <p><strong>FormButton:</strong></p>
  
  <pre><code>var submit = function() {
      this.setState({ loading: true });
  
       // xhr
  }
  &lt;button type="button" onClick={submit} disabled={this.state.loading}&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p>Am I thinking in the right mindset? To add, are there any practical examples out there?</p>
  
  <p>*I've never tested before trying out React and Jest.</p>