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

Question

我尝试了很多类似问题的答案，但都没有帮助。 （cmets 是我尝试过的。尝试用空行分隔。我在这里停留了将近一个星期，试图通过测试 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 不应该被封装，并且应该从包含它们的函数中返回，以便稍后将它们链接起来。即使当前不需要它，稍后也可能需要它来组合或测试功能。不这样做的唯一原因是回调可能需要一个不允许返回承诺对象的特定签名。

应该是：

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