我如何测试具有儿童组件中所有文本字段的反应应用程序？

Question

我已经创建了一个反应应用程序，它具有父级中的所有逻辑（如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> 
); 

Answer 1

你应该测试你的孩子组成。当模拟文本框的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中有类似的代码可用于酶。