title: Find component by display name when the component is stateless functional, with Enzyme
body: <p>I have the following components:</p>
  
  <pre><code>// Hello.js
  export default (React) =&gt; ({name}) =&gt; {
    return (
      &lt;div&gt;
        Hello {name ? name : 'Stranger'}!
      &lt;/div&gt;
    )
  }
  
  // App.js
  import createHello from './Hello'
  
  export default (React) =&gt; () =&gt; {
    const Hello = createHello(React)
    const helloProps = {
      name: 'Jane'
    }
    return (
      &lt;Hello { ...helloProps } /&gt;
    )
  }
  
  // index.js
  import React from 'react'
  import { render } from 'react-dom'
  import createApp from './App'
  
  const App = createApp(React)
  
  render(
    &lt;App /&gt;,
    document.getElementById('app')
  )
  </code></pre>
  
  <p>And I want to set up a test to see if the <code>App</code> component contains one <code>Hello</code> component. I tried the following, using <a href="https://github.com/substack/tape" rel="noreferrer"><code>Tape</code></a> and <a href="http://airbnb.io/enzyme/" rel="noreferrer"><code>Enzyme</code></a>:</p>
  
  <pre><code>import createApp from './App'
  import React from 'react'
  import test from 'tape'
  import { shallow } from 'enzyme'
  
  test('App component test', (assert) =&gt; {
    const App = createApp(React)
    const wrapper = shallow(&lt;App /&gt;)
    assert.equal(wrapper.find('Hello').length === 1, true)
  })
  </code></pre>
  
  <p>But the result was that the <code>length</code> property of the <code>find</code> result was equal to <code>0</code>, when I was expecting it to be equal to <code>1</code>. So, how do I find my <code>Hello</code> component?</p>