如何测试 React 异步容器组件？

Question

在此视频中：Egghead lecture，Dan Abramov 解释并给出了容器组件的定义。我真的很喜欢容器组件的想法，但我正在尝试测试它们，当容器组件没有异步工作时，测试很好我只是用酶模拟组件上的一些事件，然后我检查生成的快照，但是当组件具有异步工作时，请考虑以下情况：

class Form extends React.Component {
    constructor(props){
        super(props);
        this.state = {};
        this.sendForm = props.sendForm;
        this.onSubmit = this.onSubmit.bind(this);
        this.nameChange = this.nameChange.bind(this);
    }

    nameChange(e){
        this.setState({
            name: e.target.value
        });
    }

    onSubmit(e){
        e.preventDefault();
        this.sendForm({name: this.state.name});
    }

    return (
        <form onSubmit={this.onSubmit}> 
            <input onChange={this.nameChange} />
        </form>
    );
}

class Registration extends React.Component {
    constructor(props){
        super(props);
        this.state = {};
        this.sendForm = this.sendForm.bind(this);
    }

    sendForm(data){
        fetch(`sendsomewhere.com/?name=${data}`, headers)
            .then((result) => this.setState({
                result: result
            }));
    }

    render(){
        <Form sendForm={this.sendForm} />
    }
}

我如何知道组件何时正常工作？

这个问题也适用于组件没有异步工作的情况：我怎么知道注册实际上正确使用了 fetch 函数？既然是自己控制的，组件上没有注入任何东西？

Answer 1

也许尝试像这样返回

sendForm(data){
    return fetch(`sendsomewhere.com/?name=${data}`, headers)
           .then((result) => this.setState({
              return result
           }));
}

然后因为result 应该是返回的内容，您可以执行类似formResponse = sendForm(data) 然后formResponse.status 200 之类的操作。这是松散的编码，未经测试......语法中的某些内容可能不正确，但这只是为了让您大致了解如何获得要测试的内容。