Question

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

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

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

这个问题也适用于组件没有asyn工作的情况：我怎么知道Registration实际上正确使用了fetch功能？既然它控制着自己，那么组件上没有任何东西被注入？

Answer 1

也许尝试返回

$attributes = array("samaccountname", "sn", "givenname", "mail");

$search_filter = "(&(givenname=$firstName)(sn=$lastName))";

$search = ldap_search($ds, $dn, $search_filter, $attributes, 0, 0);

$data = ldap_get_entries($ds, $search);

$rows = array();
for ($i=0; $i<$data["count"]; $i++) {
    if (isset($data[$i]["sn"][0], $data[$i]["givenname"][0])) {
        $email = ($data[$i]["mail"][0]);
        echo $email;
        array_push($rows,$email);
    }

}

echo json_encode($rows);

然后因为sendForm(data){ return fetch(`sendsomewhere.com/?name=${data}`, headers) .then((result) => this.setState({ return result })); }应该是返回的内容，您可以为{200}或类似内容执行类似result然后formResponse = sendForm(data)的操作。这是松散编码的，未经测试......语法中的某些内容可能已关闭，但它只是为了大致了解如何获得测试内容。

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

1 个答案: