Enzyme fail to find with constructor selector, but succeed with display name selector

Question

I am using Jest and Enzyme for my React app testing.

my folder structure looks like

• /src

  • /__test__

    • /LevelComponents

      • OuterComp.test.js

  • /components

    • /LevelComponents

      • OuterComp.js

    • /Widgets

      • ChenDropdown.js

OuterComp.js

import React, { Component } from 'react'

import ChenDropdown from '../Widgets/ChenDropdown'

class OuterComp extends Component {

  render() {
      return (
        <div>
          <ChenDropdown />
          <ChenDropdown />
        </div>
      )
  }
}

export default OuterComp

ChenDropdown.js

import React, { Component } from 'react'

class ChenDropdown extends Component {
  render() {
    return <h1>test</h1>
  }
}

export default ChenDropdown

OuterComp.test.js

import Adapter from 'enzyme-adapter-react-16'
import Enzyme, { mount } from 'enzyme'

import OuterComp from '../../components/LevelComponents/OuterComp'
import ChenDropdown from '../../components/widgets/ChenDropdown'

Enzyme.configure({ adapter: new Adapter() })

describe('test', () => {
  it('test', () => {
    const wrapper = mount(<OuterComp />)
    console.log(wrapper.debug())
    expect(wrapper.exists()).toBe(true)
    expect(wrapper.find('ChenDropdown').length).toBe(2)
    expect(wrapper.find(ChenDropdown).length).toBe(2)
  })
})

The result is the test can pass

expect(wrapper.find('ChenDropdown').length).toBe(2)

but fails at

expect(wrapper.find(ChenDropdown).length).toBe(2)

wrapper.debug() outputs:

<OuterComp>
  <div>
    <ChenDropdown>
      <h1>
        test
      </h1>
    </ChenDropdown>
    <ChenDropdown>
      <h1>
        test
      </h1>
    </ChenDropdown>
  </div>
</OuterComp>

I wonder why, and when I can use it directly, and when I have to put string around it.

Answer 1

Sorry, I was being dumb, I had a typo in my import, widgets should be Widgets