Блог

Я пишу какой-то тест, используя 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 )

Но в моем втором тесте, если я печатаю содержимое моего _wrapper использования console.log(_wrapper.html()) , я получаю

 '<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 .

Я что-то пропустил?

shallow не будет «отображать» подкомпоненты. Он используется для тестирования отдельного компонента, а не его дочерних элементов. Я думаю, что использование mount вместо shallow позволит вам протестировать то, что вы хотите.

Поверхностный рендеринг полезен для того, чтобы ограничить себя в тестировании компонента как единого целого и убедиться, что ваши тесты косвенно не влияют на поведение дочерних компонентов.