title: How do I find child components without having to specify the HOC wrapping them?
body: <p>Often when I'm working with Material-ui its extensible nature gets in the way of testing.</p>
  
  <p>This is because even though I am using, say:</p>
  
  <pre class="lang-js prettyprint-override"><code>const MyEventButton = () =&gt; (&lt;IconButton /&gt;
    &lt;Event /&gt;
  &lt;/IconButton&gt;)
  </code></pre>
  
  <p>What I get in the test output of a shallow render is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;WithStyles(ForwardRef(IconButton)) &gt;
    &lt;Event /&gt;
  &lt;/WithStyles(ForwardRef(IconButton)) &gt;
  </code></pre>
  
  <p>This HOC wrapping is not something I overly care about for my tests (i.e. I'm <em>not</em> testing that the component is <code>WithStyles</code> or uses <code>ForwardRef</code>), because it's an implementation detail which could change without me wanting/needing to update tests.</p>
  
  <p>Ultimately, this means I cannot write my tests as:</p>
  
  <pre class="lang-js prettyprint-override"><code>it('Renders IconButton', () =&gt; {
    const wrapper = shallow(&lt;MyEventButton /&gt;);
    expect(wrapper.exists('IconButton')).toEqual(true);
  }
  </code></pre>
  
  <p>I have to do:</p>
  
  <pre class="lang-js prettyprint-override"><code>it('Renders IconButton', () =&gt; {
    const wrapper = shallow(&lt;MyEventButton /&gt;);
    expect(wrapper.exists('WithStyles(ForwardRef(IconButton))')).toEqual(true);
  }
  </code></pre>
  
  <p>Which feels like I've coupled my tests too tightly with materials current inner workings.</p>
  
  <p>Is there a way of the tests peering inside the HOC and getting the base Child component? Preferably without having to <code>dive</code> or guess where in the component it is with <code>children().at(0)</code> an poking around. Using `wrapper.exists() also fails for similar reasons.</p>
  
  <p>I have had a look around Stackoverflow and the internet and not found a working solution.</p>