为什么酶在 table 中找不到 'tr'？

Question

我正在使用 enzyme 编写一些测试，但我有一些奇怪的行为。这是我的测试：

  import React from 'react'
  import { TypeTable } from 'routes/Type/components/TypeTable'
  import { shallow } from 'enzyme'
  import { Table } from 'react-toolbox'

  // ...

  let _props, _wrapper

  beforeEach(() => {
    _props = {
      getTypes: sinon.spy(),
      types: [
        { name: 'type 1'},
        { name: 'type 2'}
      ]
    }
    _wrapper = shallow(<TypeTable {..._props} />)
  })

  it('Should render a <Table>', () => {
    expect(_wrapper.is(Table)).to.be.true
  })

  it('should render 2 rows', () => {
    expect(_wrapper.find('tbody').find('tr')).to.have.length(2)
  })

第一个测试正在运行。第二个不起作用（断言失败：expected { Object (root, unrendered, ...) } to have a length of 2 but got 0）

但是在我的第二次测试中，如果我使用 console.log(_wrapper.html()) 打印 _wrapper 的内容，我会得到

'<table data-react-toolbox="table">
  <thead>
    <tr>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr data-react-toolbox-table="row">
      <td>type 1</td>
    </tr>
    <tr data-react-toolbox-table="row">
      <td>type 2</td>
    </tr>
  </tbody>
</table>'

好像还可以，里面有好几个tr.

我是不是漏掉了什么？

Answer 1

shallow 不会 "render" 子组件。它用于测试单个组件而不是其子组件。我认为使用 mount 而不是 shallow 可以让你测试你想要的东西。

Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components.

为什么酶在 table 中找不到 'tr'？

Why do enzyme not find 'tr' in a table?

javascript

reactjs

enzyme