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：測試包含組件的組件

回答

相關問題