ReactJS：测试包含组件的组件

我使用Jest来测试我的React组件。然而，我不知道（或没有看到任何东西）如何测试通过（作为道具）方法到子组件的组件。例如，我有：Form，MemberList，Member,FormButton。同样的事情也该代码：ReactJS：测试包含组件的组件

表：

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

上午我在正确的心态在想什么？补充一点，那里有没有实际的例子？

*在试用React和Jest之前，我从未测试过。

来源

2014-12-07 srph

解决方案是将模拟函数直接传递给子组件并进行测试。涉及多个“子组件”的任何事情通常都不是真正的单元测试，因为您正在测试多个功能单元。

所以我会创造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) 

    }) 
})

现在你缺少断言传递到成员列表中的删除处理程序正确地传递给成员组件。因此，让我们另一个测试添加到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或其他方式引导你。

来源

2014-12-07 22:03:32 SegFaultx64

ReactJS：测试包含组件的组件

回答

相关问题