测试从Vue JS应用程序中的API获取数据的代码
测试从Vue JS应用程序中的API获取数据的代码
提问于 2019-10-22 10:48:39
我正在尝试编写一个单元测试，对下面的代码使用vue-test-utils和Jest来了解是否分配了数据属性。
以下是代码：
created () {
this.loadGridAndContent()
},
methods: {
async loadGridAndContent () {
let result = await AppService.loadDashboard(this.userDetails.psref).catch(err => console.log(err))
this.dashBoardData = result.data[0]
this.dashBoardDataClone = JSON.parse(JSON.stringify(this.dashBoardData))
}
}AppService是
import Api from '@/services/api.service'
export default {
async loadDashboard (psRef) {
return Api().get('/user/' + psRef + '/dashboard')
.catch(error => {
console.log(error)
})
},
async reorderDashboard (dashBoardOrderData) {
return Api().put('/user/favourites/reorderdashboard', { NewOrder: dashBoardOrderData })
.catch(error => {
console.log(error)
})
}
}这是假的
export default {
loadDashboard: jest.fn(() => Promise.resolve([
{ db_name: 'Jobs', dxp_dashboardref: 1, dxp_hidden: 0, dxp_position: 1, dxp_ref: 926 },
{ db_name: 'Firms', dxp_dashboardref: 2, dxp_hidden: 0, dxp_position: 2, dxp_ref: 927 },
{ db_name: 'CRM', dxp_dashboardref: 5, dxp_hidden: 0, dxp_position: 3, dxp_ref: 987 }
]))
}Api.js是：
import axios from 'axios'
export default () => {
return axios.create({
baseURL: ``,
withCredentials: false,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
}下面是一个测试：
describe('DashBoard component tests', () => {
let state
let store
let wrapper
beforeEach(() => {
state = {
auth: {
user: {
auids: '',
md_clock: 0,
md_picture: '',
ps_fname1: '',
ps_surname: '',
psname: 'Test Test',
psref: 0
}
}
}
store = new Vuex.Store({
state
})
wrapper = mount(Dashboard, {
localVue,
store
})
})
afterEach(() => {
wrapper.destroy()
})
it('it should assign dashBoardData to the result of AppService.loadDashboard', async () => {
// expect.assertions(1)
let dashBoardData = [
{ db_name: 'Jobs', dxp_dashboardref: 1, dxp_hidden: 0, dxp_position: 1, dxp_ref: 926 },
{ db_name: 'Firms', dxp_dashboardref: 2, dxp_hidden: 0, dxp_position: 2, dxp_ref: 927 },
{ db_name: 'CRM', dxp_dashboardref: 5, dxp_hidden: 0, dxp_position: 3, dxp_ref: 987 }
]
let resp = { data: dashBoardData }
console.log(loadDashboard.getMockImplementation)
loadDashboard.mockResolvedValue(resp)
//loadDashboard.mockImplementation(() => Promise.resolve(resp))
await flushPromises()
expect(wrapper.vm.dashBoardData).toEqual(dashBoardData)
})
})本质上，我认为我在嘲笑app.service的解析值，然后等待承诺并断言数据属性已被分配。
'TypeError:无法读取未定义的属性'0‘
在VueComponent.loadGridAndContent
(C:\WebApp\WebApp_Vue_Frontend\src\views\dashboard\Dashboard.vue:93:1) at process._tickCallback (process._tickCallback/process/next_tick.js:68:7)‘
我不知道为什么会这样。任何想法都将不胜感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-22 15:44:16
解决方案是实际正确地模拟loadDashboard函数的解析值，如
export default {
loadDashboard: jest.fn(() => Promise.resolve({ data: [
[
{ db_name: 'Jobs', dxp_dashboardref: 1, dxp_hidden: 0, dxp_position: 1, dxp_ref: 926 },
{ db_name: 'Firms', dxp_dashboardref: 2, dxp_hidden: 0, dxp_position: 2, dxp_ref: 927 },
{ db_name: 'CRM', dxp_dashboardref: 5, dxp_hidden: 0, dxp_position: 3, dxp_ref: 987 }
]
] }))
}Stack Overflow用户
发布于 2019-10-22 11:21:39
由于axios调用是GET请求，您应该查看文档：
axios.get(url)
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});这就是说，您可以像这样使用回调(或者更现代的承诺)：
async loadDashboard (psRef, callback) {
Api().get('/user/' + psRef + '/dashboard')
.then(function(response){
callback(response.data);
})
.catch(error => {
console.log(error)
})
}改变你的方法：
async loadGridAndContent () {
await AppService.loadDashboard(this.userDetails.psref, this.callback).catch(err => console.log(err))
}
callback(data){
this.dashBoardData = data[0]
this.dashBoardDataClone = JSON.parse(JSON.stringify(this.dashBoardData))
}总之，您希望在使用响应之前等待get()完成，这是用上面的代码完成的。
希望这能帮到你。
我是新来的，所以如果有错误，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58502565
复制相关文章
相似问题
腾讯云开发者
