2016-10-24 3 views
1

Я пишу некоторые тесты, используя 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.

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

ответ

4

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

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

+0

Хорошо, но нормально ли, что '_wrapper.html()' возвращает мне правильный html? – ThomasThiebaud

+0

Да. Разница между неглубоким и монтированием иногда немного запутанна. Когда у меня проблема, я обычно проверяю/переключаю между ними. Например, я обычно использую mount, когда хочу проверить, как реквизиты передаются дочерним компонентам вместо фактического вывода. – Amida

+0

Большое спасибо, я буду осторожен – ThomasThiebaud

Смежные вопросы