Asynchronous 我是否必须使用“setTimeout”在测试中测试react组件的异步代码？

我有一个react表单，在提交表单时向后端发送请求：

import React, {Component} from 'react';
import request from 'superagent';

export default class RegisterForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    }
  }

  render() {
    return <form id="form" onSubmit={this._onSubmit.bind(this)}>
      <div>
        <h1>Register</h1>
      </div>
      <div>
        <input id="username" type="text" placeholder="username" onChange={event => {
          this.setState({username: event.target.value})
        }}/>
      </div>
      <div>
        <input id="password" type="password" placeholder="password" onChange={event => {
          this.setState({password: event.target.value})
        }}/>
      </div>
      <div>
        <button type="submit">Register</button>
      </div>
    </form>
  }

  _onSubmit(event) {
    event.preventDefault();

    request
      .post('/api/users')
      .send({
        username: this.state.username,
        password: this.state.password
      })
      .end((err, res) => {
        if (err) {
          console.error(err);
          if (res.statusCode === 400) {
            return window.alert('invalid data:' + res.text);
          }
          if (res.statusCode === 409) {
            return window.alert('registering failed' + res.text);
          }
          return window.alert('unknown err:' + res.statusCode);
        }
        window.alert('registering successfully: ' + res.text);
      })
  }

}

import React，{Component}来自'React'；
“超级代理”的进口请求；
导出默认类RegisterForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”
}
}
render（）{
返回
登记
{
this.setState（{username:event.target.value}）
}}/>
{
this.setState（{密码：event.target.value}）
}}/>
登记
}
_提交（事件）{
event.preventDefault（）；
要求
.post（“/api/users”）
.发送({
用户名：this.state.username，
密码：this.state.password
})
.end（（错误、恢复）=>{
如果（错误）{
控制台错误（err）；
如果（res.statusCode==400）{
返回window.alert（'无效数据：'+res.text）；
}
如果（res.statusCode==409）{
返回window.alert（'注册失败'+res.text）；
}
返回window.alert（'未知错误：'+res.statusCode）；
}
window.alert（'注册成功：'+res.text）；
})
}
}

在测试中，我模拟表单提交并检查响应http代码的处理是否正确：

import nock from 'nock';
import RegisterForm from '../../public/register-form.jsx';
import {shallow, mount} from 'enzyme';
import React from 'react';
import jsdomGlobal from 'jsdom-global';
jsdomGlobal();

it('register successfully', (done) => {
  nock(/.*/)
    .post('/api/users', {
      username: 'freewind',
      password: '123456'
    })
    .reply(201, "ok");

  spyOn(window, 'alert');
  const wrapper = mount(<RegisterForm />);

  wrapper.find('#username').simulate('change', {target: {value: 'freewind'}});
  wrapper.find('#password').simulate('change', {target: {value: '123456'}});
  wrapper.find('#form').simulate('submit');

  setTimeout(() => {
    expect(window.alert).toHaveBeenCalledWith('registering successfully: ok');
    done();
  }, 100);
});

从“nock”导入nock；
从“../../public/register form.jsx”导入RegisterForm；
从“酶”导入{shall，mount}；
从“React”导入React；
从“jsdom全局”导入jsdomGlobal；
jsdomGlobal（）；
它（'成功注册'，（完成）=>{
nock（/.*/）
.post（“/api/users”{
用户名：“freewind”，
密码：“123456”
})
.答复（201，“可以”）；
间谍（窗口，“警报”）；
const wrapper=mount（）；
find（'#username'）.simulate（'change'，{target:{value:'freewind'}}）；
find（“#password”）.simulate（'change'，{target:{value:'123456'}）；
wrapper.find（“#form”）.simulate（'submit'）；
设置超时（（）=>{
期望（window.alert）.tohavencalledwith（'registing successfully:ok'）；
完成（）；
}, 100);
});

您可以看到我必须等待

100ms

，然后才能检查

window.alert

有没有更好的办法

---

这是一个您可以克隆并在计算机上运行的项目：

您发现了吗？