Find component by display name when the component is stateless functional, with Enzyme

There are a couple of things you can do in this case. Enzyme can match component constructors based on the constructor's static .displayName or .name properties, or by referential equality. As a result, the following approaches should all work:

Direct Reference

you can import the actual components in your tests and find them using direct references to the component:

// NavBar-test.jsimport NavBar from './path/to/NavBar';  ...  wrapper.find(NavBar).length)

Named Function Expressions

If you use named function expressions to create your stateless functional components, the names should still work.

// NavBar.js  module.exports = function NavBar(props) { ... }

Static .displayName property

You can add a static .displayName property on the components:

// NavBar.jsconst NavBar = (props) => { ... };NavBar.displayName = 'NavBar';

Try to import the Hello component in the top of your file and then update your assertion to find the actual component and not the name of it. Like below:

import createApp from './App'import Hello from './Hello'import React from 'react'import test from 'tape'import { shallow } from 'enzyme'test('App component test', (assert) => {  const App = createApp(React)  const wrapper = shallow(<App />)  assert.equal(wrapper.find(Hello).length === 1, true)})

Btw for all the enzyme users out there the assertion would be something like:

expect(wrapper.find(Hello)).toHaveLength(1);