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 不应该被封装，而应该从包含它们的函数中返回，以便稍后链接它们。即使当前不需要，也可能在以后需要编写或测试函数。不这样做的唯一原因是回调可能需要一个不允许返回承诺对象的特定签名。

应该是：

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

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

代码在这里

1 个答案: