тестирование изменения состояния на реакцию после вызова асинхронного метода - PullRequest
Новая
       36

тестирование изменения состояния на реакцию после вызова асинхронного метода

0 голосов
/ 08 июня 2018

У меня есть компонент 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>);
    }
}

, а затем я хочу протестировать с Мокко и 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 в качестве обещания 

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

Безрезультатно: wrapper.instance().callService().then() is not defined

Любые другие предложения?Я действительно не хочу в конечном итоге использовать setTimeout() функцию

...