reactjs - 调用异步方法后在反应上测试状态变化

Question

我有一个 React 组件，它执行以下操作：

零件

class CallBackend extends React.Component{
    constructor(){
        super();
        this.state = {
            message:"",
            loading:true
        };
    }

    callService = ()=>{
        axios.get("http://localhost:80/sample-url")
             .then(response=>this.setState({loading:false, message:response.data}))
             .catch(error=>this.setState({loading:false, message:error.message}));
    };

    render(){
        return(<p>{this.state.loading}</p>);
    }
}

然后，我想用mocha和chai测试调用该callService方法后状态是否发生变化：

单元测试

it("should change the state value after calling the service",()=>{
    const clock = sinon.useFaketimers();
    nock("http://localhost:80").get("/sample-url").reply(200,"ok");
    const wrapper = shallow(<CallBackend/>);
    expect(wrapper.state().loading).to.equal(true);
    wrapper.instance().callService();
    clock.tick(500);
    wrapper.update();
    expect(wrapper.state().loading).to.equal(false);
});

我尝试过使用wrapper.update()甚至sinon.fakeTimer()调用callService作为 Promise

wrapper.instance().callService().then(()=>{
    expect(wrapper.state().loading).to.equal(false);
});

没有结果：wrapper.instance().callService().then() is not defined

还有其他建议吗？我真的不想最终使用setTimeout()函数