score:23

Accepted answer

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.js

import 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.js

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

score:0

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);

Related Query

More Query from same tag