reactjs - enzyme 无法通过构造函数选择器找到，但通过显示名称选择器成功找到

Question

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

我的文件夹结构如下

• /src

  • /__测试__

    • /LevelComponents

      • OuterComp.test.js

  • /组件

    • /LevelComponents

      • OuterComp.js

    • /小部件

      • 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)
  })
})

结果是测试可以通过

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