在 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: 'amail@em.com'
                    }
                }
            })
    )

        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 不应被封装，而应从包含它们的 function 返回，以便稍后链接它们。 即使当前不需要，但稍后可能需要它来组合或测试 function。 不这样做的唯一原因是回调可能需要一个不允许返回 promise object 的特定签名。

它应该是：

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