酶无法通过构造函数选择器找到，但可以通过显示名称选择器找到

Question

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

我的文件夹结构看起来像

• / src

  • / __ test __

    • / 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