Я пишу некоторые тесты, используя enzyme
, но у меня есть странное поведение. Вот мой тест:Почему фермент не находит «tr» в таблице?
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
.
Я что-то пропустил?
Хорошо, но нормально ли, что '_wrapper.html()' возвращает мне правильный html? – ThomasThiebaud
Да. Разница между неглубоким и монтированием иногда немного запутанна. Когда у меня проблема, я обычно проверяю/переключаю между ними. Например, я обычно использую mount, когда хочу проверить, как реквизиты передаются дочерним компонентам вместо фактического вывода. – Amida
Большое спасибо, я буду осторожен – ThomasThiebaud