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

Question

On this video: Egghead lecture , Dan Abramov explains and gives a definition of container components. I really liked the idea of container components, but i'm trying to test them, when the container component does not have an async work the test is fine i just simulate some event on the component with Enzyme and then i check the resulting snapshot, but consider the following case when the component has asyn work:

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} />
    }
}

How do i know when the component worked correctly?

And this question is also for the case where the component does not have an asyn work: How do i know that Registration actually used the fetch function correctly? Since it controls itself and there is nothing being injected on the component?

Answer 1

maybe try returning like

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

then because result should be what that returns, you can do something like formResponse = sendForm(data) then formResponse.status for a 200 or something. This is loosely coded, and untested...something in the syntax may be off, but it's just to give a general idea of how you might get something to test against.