React 中单元测试 onClick 方法中的 Mock Fetch API答案

【问题标题】：Mock Fetch API in unit test onClick method in ReactReact 中单元测试 onClick 方法中的 Mock Fetch API
【发布时间】：2017-09-15 00:15:27
【问题描述】：

我为要测试的代码创建了一个 JS Bin：https://jsbin.com/zaqiyuw/edit?html,js,output。我有一个调用组件中方法的按钮。该组件使用 fetch 调用一个 api，然后根据返回的内容设置状态。我似乎无法正确地嘲笑它。

当测试运行时，它调用该方法并将 getPingMsg() 中的状态设置为 { ping: "loading..."} 但它从不将其设置为它从测试中的 then on fetch 获得的值。任何想法可能是什么问题？

我正在使用 sinon、酵素和玩笑。这是我尝试过的：

describe('<App />', function() {

    const wrapper = shallow(<App />);

    it('should return 1 onClick', ()=> {
        sinon.stub(window, 'fetch');
        function jsonOk (body) {
            const mockResponse = 
                new window.Response(JSON.stringify(body), {
                    status: 200,
                    headers: {
                         'Content-type': 'application/json'
                    }
                 });
             return Promise.resolve(mockResponse);
         }
         window.fetch.returns(
             jsonOk({ping: 1})
         );
         wrapper.update();
         expect(wrapper.state()).toEqual({ ping: 'No Request Yet' }); //this works
         wrapper.find('button').simulate('click');
         expect(wrapper.state()).toEqual({ ping: 1 }); //this doesn't
     });
});

【问题讨论】：

标签： javascript unit-testing reactjs mocking fetch-api

【解决方案1】：

非常感谢。事实证明它正在设置状态，但是在我调用期望语句（DOH）之后！在您的帮助下，此测试有效：

it('should return pong onClick', (done)=> {
    sinon.stub(window, 'fetch');
    function jsonOk (body) {
        const mockResponse = new window.Response(JSON.stringify(body));
        return Promise.resolve(mockResponse);
    }
    window.fetch.returns((jsonOk({ping: 1})));
    expect(wrapper.state()).toEqual({ ping: 'No Request Yet' });
    wrapper.find('button').simulate('click');
    setTimeout(function() {expect(wrapper.state()).toEqual({ ping: 1 }); console.log(wrapper.state()); done();}, 10);
});

【讨论】：