title: How to use enzyme ShallowWrapper to find a React Component stored as a prop in another React Component?
body: <p>I have a jest/enzyme test which creates a ShallowWrapper around a component, finds a specified semantic-ui-react Button (by id), simulates a click on the button, and then looks to see if the click toggled certain content. </p>
  
  <p>Sample JSX:</p>
  
  <pre><code>&lt;Popup
    trigger={&lt;Button onClick={this.toggleShowThing} id="special-btn"&gt;a button&lt;/Button&gt;}
    content="Popup Words"
  /&gt;
  {this.state.showThing &amp;&amp;
    &lt;div className="special-thing"&gt;The Thing's Words&lt;/div&gt;
  }
  </code></pre>
  
  <p>Sample Test:</p>
  
  <pre><code>it('shows the thing when the button is clicked', () =&gt; {
    const wrapper = shallow(&lt;MyComponent /&gt;);
    wrapper.find('#special-btn').simulate('click', { preventDefault() {} });
    expect(wrapper.find('.special-thing').exists()).toBe(true);
  });
  </code></pre>
  
  <p>This test worked when I just had the Button. When I added the Popup and the Button was placed into the trigger prop then I received an error because #special-btn could not be found. </p>
  
  <blockquote>
    <p>Error: Method “props” is only meant to be run on a single node. 0 found instead.</p>
  </blockquote>
  
  <p>An enzyme snapshot of the component shows that the Popup looks like this:</p>
  
  <pre><code>&lt;Popup 
    content="Popup Words"
    on="hover"
    position="top left"
    trigger={
      &lt;Button
        id="special-btn"
        onClick={[Function]}
      &gt;
        a button
      &lt;/Button&gt;
    }
  /&gt;
  </code></pre>
  
  <p>I need my test to work again. How do I gain access to the #special-btn again in the test so that I can call .simulate('click') on it?</p>