Find component by display name when the component is stateless functional, with Enzyme
<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>