Vue with jest -使用异步调用进行测试
如何让我的测试等待api的结果？我使用vue和jest来测试我的组件。
我想测试将客户端写入我的数据库的方法。在我的组件中，我有以下方法：
methods: {
onSubmitClient(){
axios.post(`urlApi`, this.dados).then(res => {
return res;
})
}
}我的测试中的
describe('login.vue', () => {
let wrapper
beforeAll(()=>{
wrapper = mount(client, {
stubs: ['router-link'],
store,
data() {
return {
dados: {
name: 'tes name',
city: 'test city'
},
};
}
})
})
it('store client', () => {
res = wrapper.vm.onSubmitLogin()
console.log(res);
})
})我的测试不会等待API调用完成。我需要等待API调用，才能知道测试是否有效。如何让我的测试等待API返回？
回答 1
Stack Overflow用户
发布于 2018-08-13 05:13:55
您的代码中有几个问题。
首先，你不能return from an async call。相反，您可能应该在onSubmitClient中设置一些数据，并返回整个axios调用，这是一个承诺。例如：
onSubmitClient(){
return axios.post(`urlApi`, this.dados).then(res => {
this.result = res;
return res;
})
}我假设这里的方法是存储来自服务器的result。也许你不想这样；这只是一个例子。我稍后再来讨论这个问题。
好了，现在，您可以在包装器中调用onSubmitClient，并查看是否已经设置了this.result。正如您已经知道的，这并不是直接有效的。
为了让jest测试等待异步代码，you need either to provide a done callback function or return a promise。我将使用前者来展示一个示例：
it('store client', (done) => {
wrapper.vm.onSubmitLogin().then((res) => {
expect(wrapper.vm.dados).toEqual(res);
done();
})
});正如@jonsharpe在评论中所说的，现在这段代码应该可以正常工作，但它仍然存在一个问题。
您通常不希望在单一测试中执行真实网络请求，因为它们很慢且不可靠。此外，单一测试的目的是单独测试组件，这里我们测试的不仅是我们的组件在发出请求时是否正确设置了this.result 。我们还在测试是否有一台We服务器启动并运行，该服务器实际上正在工作。
因此，在此场景中，我要做的是测试这一块功能，将请求提取到另一个方法，用vue-test-utils和jest.fn模拟它，然后断言onSubmitClient正在工作：
组件：
export default {
data() {
return {
http: axios,
...
},
methods: {
onSubmitClient(){
this.http.post(`urlApi`, this.dados).then(res => {
this.result = res;
})
}
}
}
}测试：
it('store client', (done) => {
const fakeResponse = {foo: 'bar'};
var post = jest.fn();
var http : {
post,
};
var wrapper = mount(client, {
stubs: ['router-link'],
store,
data() {
return {
dados: {
name: 'tes name',
city: 'test city'
},
http, //now, the component under test will user a mock to perform the http post request.
}
}
});
wrapper.vm.onSubmitLogin().then( () => {
expect(post).toHaveBeenCalled();
expect(wrapper.vm.result).toEqual(fakeResponse);
done();
})
});现在，您的测试断言两件事：
post获取called.this.result应设置的值。
如果不想在组件中存储来自服务器的任何内容，只需在方法中删除第二个断言和this.result = res行即可。
因此，这基本上涵盖了为什么您的测试没有等待异步请求以及代码中的一些问题。仍然有一些事情需要考虑(f.i.我认为全局wrapper不是一个好主意，在测试组件行为时，我总是更喜欢shallowMount而不是mount )，但这个答案应该会对你有很大帮助。
PS:没有测试代码，所以可能是我搞砸了什么。如果事情就是不能工作，寻找语法错误或类似的问题。
https://stackoverflow.com/questions/51812626
复制相似问题
腾讯云开发者
