Question

我创建了一个react应用程序，其中包含父项中的所有逻辑（如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道具创建模拟或间谍来完成。

示例测试如下所示：

嘲弄道具。

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

测试是否调用了mock方法：

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);
  });

我正在使用Jest和React TestUtils。我的github project中有类似的代码可用于酶。

如何对包含子组件中所有文本字段的反应应用进行单元测试？

1 个答案: