在vue中使用jest-mock测试axios时未定义响应

Question

我试过很多类似问题的答案，但都没有帮助。(评论是我尝试过的。尝试之间用一行空白隔开。我已经在这里呆了将近一周，试图通过测试Axios请求的.then部分来提高覆盖率。真的不知道哪一部分出了问题。

此处输入代码

__模拟__/axios.js:

export default {
get: jest.fn(() => Promise.resolve({ data: {} })),
post: jest.fn(() => Promise.resolve())
}

要测试的getInfo方法：

getInfo () {
axios.get('/')
.then((response) => {
this.form.sid = response.data.data.basic_info.username
this.form.name = response.data.data.basic_info.name
this.form.tel = response.data.data.basic_info.mobile_number
this.form.email = response.data.data.basic_info.email
return response.data
}).catch(function (error) {
console.log(error)
})
}

测试代码：

import { shallowMount } from '@vue/test-utils'
import InfoForm from '@/components/InfoForm'
//attempt 1
import axios from 'axios';
jest.mock('axios')
//attempt 2
// import axios from './__mocks__/axios'
// jest.mock('axios')
//attempt 3
// import axios from './__mocks__/axios'
// jest.mock("axios", () => ({
//     post: jest.fn((_url, _body) => {
//       url = _url
//       body = _body 
//       return Promise.resolve()
//     }),
//     get: jest.fn(() => {
//         return Promise.resolve()
//       })
//   }))
//attempt 4
// import axios from "axios"
//...
//describe part is skipped here
it('test method: getInfo', async () => {
const mockAxiosGet = jest.spyOn(axios, "get")
mockAxiosGet.mockResolvedValue(() =>
Promise.resolve({
data: {
basic_info: {
username: 'aName',
name: 'aNAME',
mobile_number: '12222222222',
email: '[e-mail]'
}
}
})
)
const response = await wrapper.vm.getInfo()
expect(response).toBeDefined() // error(plz see error message below)
})

错误消息：

Ensure that a variable is not undefined.
InfoForm.vue test > test method: getInfo
-----
Error: expect(received).toBeDefined()
Received: undefined Jest

非常感谢您的帮助

Answer 1

getInfo是一个常见的承诺陷阱。Promise不应该被封装，应该从包含它们的函数返回，以便稍后将它们链接起来。即使当前不需要，以后也可能需要编写或测试函数。不这样做的唯一原因是回调可能需要一个不允许返回promise对象的特定签名。

应该是：

getInfo () {
return axios.get('/')
...