我如何測試具有兒童組件中所有文本字段的反應應用程序？

我已經創建了一個反應應用程序，它具有父級中的所有邏輯（如onchange函數）以及子組件中的所有html呈現。我如何測試具有兒童組件中所有文本字段的反應應用程序？

爲了測試是否正確的狀態變化正在發生，我必須輸入文本到輸入字段並輸入值，但唯一的問題是我不知道如何訪問子元素，當我在js dom中裝入父項。

我應該將邏輯移入子組件嗎？還是我應該只測試父組件的功能？

這是從父

render() { 
    if (!this.state.accessTokenEntered) { 
     return <AccessTokenPage _onChange={this._onChange} 
           accessToken={this.state.inputs.accessToken} 
           env={this.state.inputs.env} 
           _onFirstClick={this._onFirstClick}/>;

，這是孩子

const AccessToken = props =>(
<Layout> 
    <Input name={"accessToken"} displayName={"Access Token"} _onChange={props._onChange} 
      value={props.accessToken}/> 


    <DropDown name={"env"} displayName={"Environment"} _onChange={props._onChange} 
       data={['ppe', 'prod']} multiple={false} 
       value={props.env}/> 

    <br/> 

    <div style={{"textAlign": "center"}}> 
     <input type="button" onClick={props._onFirstClick} className="btn btn-primary" value="Submit"/> 
    </div> 
</Layout> 
);

，這是孩子的孩子

const Input = props => (
<div className="form-group row"> 
    <label className="col-xs-2 col-form-label">{props.displayName}</label> 

    <div className="col-xs-10"> 
     <input name={props.name} className="form-control" value={props.value} 
       onChange={props._onChange}/></div> 
</div> 
);

來源

2016-09-09 Vivek Santhosh

你應該測試你的孩子組成。當模擬文本框的onChange事件時，測試onChange prop是否被調用。這可以通過爲onChange prop創建一個模擬或間諜來完成。

示例測試如下所示：

嘲笑道具。

beforeEach(() => { 
    onAdd = jest.fn(); 
    add = TestUtils.renderIntoDocument(<Add onAdd={onAdd} />); 
    });

測試，如果模擬方法被稱爲：

it('Button click calls onAdd',() => { 
    const button = TestUtils.findRenderedDOMComponentWithTag(add, 'button'); 
    const input = TestUtils.findRenderedDOMComponentWithTag(add, 'input'); 
    input.value = 'Name 4'; 
    TestUtils.Simulate.change(input); 
    TestUtils.Simulate.click(button); 
    expect(onAdd).toBeCalledWith(input.value); 
    });

我使用的玩笑並作出反應TestUtils。在我的github project中有類似的代碼可用於酶。

來源

2016-09-09 11:03:58 vijayst

我可以用間諜測試最低級別的孩子，但我可以測試中級別的組件嗎？就像其他組件一樣，我發現它很難測試 –

我如何測試具有兒童組件中所有文本字段的反應應用程序？

回答

相關問題