酶无法使用构造函数选择器找到，但使用显示名称选择器成功

Question

我正在使用Jest和Enzyme进行 React 应用程序测试。

我的文件夹结构看起来像

• /源

  • /__测试__

    • /关卡组件

      • OuterComp.test.js

  • /成分

    • /关卡组件

      • 外部组件

    • /小部件

      • 陈Dropdown.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)
  })
})

结果是测试可以通过

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

但失败了

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

wrapper.debug() 输出：

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

我想知道为什么，什么时候我可以直接使用它，什么时候我必须在它周围放上绳子。

Answer 1

抱歉，我太蠢了，我的导入有一个拼写错误，widgets应该是Widgets