我为要测试的代码创建了一个JS Bin:https://jsbin.com/zaqiyuw/edit?html,js,output。我有一个按钮,在组件中调用方法。该组件使用fetch调用api,然后根据返回的内容调用setState。我似乎无法正确地嘲笑它。
测试运行时,它将调用方法,并将getPingMsg()中的状态设置为{ping:“ loading ...”},但它从未将其设置为从测试中获取时获得的值。任何想法可能是什么问题?
我正在使用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
});
});
最佳答案
非常感谢。事实证明它正在设置状态,但是在我调用了Expect语句(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);
});
关于javascript - React中的单元测试onClick方法中的Mock Fetch API,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43484337/