5

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

我的文件夹结构看起来像

  • /src

    • /__测试__

      • /关卡组件

        • OuterComp.test.js

    • /成分

      • /关卡组件

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

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

4

1 回答 1

1

抱歉，我很笨，我的导入有错字，widgets应该是Widgets

于 2019-12-13T18:19:04.403 回答