ReactJS: Тестирование компонентов, содержащих компоненты

Question

Я использую Jest для тестирования своих компонентов React. Тем не менее, я понятия не имею (или ничего не видел), как тестировать компоненты, которые передаются (как поддержка) методам подкомпонентов. Например, у меня есть: Form, MemberList, Member, FormButton. Что-то похожее на это в коде:

Форма:

<MemberList members={this.state.members} remove={this.remove} add={this.add} /> 
<FormButton data={this.state.members} /> 

Пользователи:

<span onClick={this.add}> <!-- add button --> </span> 
{this.props.members.map(function(member, index) { 
    <Member key={index} data={member} remove={this.props.remove} /> 
})} 

Участник:

// some input like name and so, and a remove itself button. 

FormButton:

var submit = function() { 
    this.setState({ loading: true }); 

    // xhr 
} 
<button type="button" onClick={submit} disabled={this.state.loading}>Submit</button> 

Am Я думал в правильном мышлении? Чтобы добавить, есть ли там практические примеры?

* Я никогда не тестировал, прежде чем опробовать React and Jest.

Answer 1

Решение состоит в том, чтобы передать издеваемую функцию непосредственно подкомпонентам и протестировать их. Все, что связано с более чем одним «подкомпонентом», обычно не является модульным тестом, поскольку вы тестируете несколько единиц функциональности.

Так что я бы создать MemberList-test.js:

describe('MemberList', function() { 
    it('calls the add handler when add is clicked', function() { 
    var Component = TestUtils.renderIntoDocument(
     <MemberList add={ jest.genMockFn() } /> 
    ); 

    const btn = TestUtils.findRenderedDOMComponentWithTag(Component, 'span') 

    TestUtils.Simulate.change(btn); 

    expect(Component.add.mock.calls.length).toBe(1) 

    }) 
}) 

Тогда вместо того, чтобы протестировать компонент члена непосредственно в том же тесте вам следует создать Member-test.js:

describe('Member', function() { 
    it('calls the add handler when add is clicked', function() { 
    var Component = TestUtils.renderIntoDocument(
     <Member remove={ jest.genMockFn() } /> 
    ); 

    const btn = TestUtils.findRenderedDOMComponentWithTag(Component, 
     'HOWEVER YOU FIND YOUR REMOVE BUTTON') 

    TestUtils.Simulate.change(btn); 

    expect(Component.remove.mock.calls.length).toBe(1) 

    }) 
}) 

Теперь утверждение вашего отсутствуют в что обработчик удаления, который передается в список членов, правильно передается в компонент Member. Поэтому давайте добавим еще один тест на MemberList-test.js

it('passes correct information to the children', function() { 
    var MemberMock = require('../Member') 
    var removeFn = jest.genMockFn(); 

    var testMember = {WHATEVER YOUR MEMBER OBJECT LOOKS LIKE} 

    var Component = TestUtils.renderIntoDocument(
    <MemberList members={ [testMember] } 
     remove={ removeFn } /> 
    ); 

    // We expect the member component to be instantiated 1 time and 
    // passed the remove function we defined 
    // as well as a key and the data 
    expect(MemberMock.mock.calls).toEqual([[{key: 0, data: testMember, 
    remove: removeFn}]]) 

}) 

Тогда вы просто сделать по той же схеме с формой компонента. Издеваясь над списком участников и кнопкой и проверяя их отдельно и видя, что передаются правильные обработчики и данные.

Надеюсь, это имеет смысл, и если не просто ответит, и, может быть, я смогу провести вас через Skype или что-то в этом роде.