VueComponent.mounted：TypeError：无法读取挂载钩子中未定义的属性“get”

Question

我在 nuxt js 中使用 jest 进行单元测试 我已经安装了这样的钩子

async mounted(){
  
  try{
     var response = await this.$axios.get("api_url here");
     this.result = response.data;
  } catch(e){
    console.log("Exception: ",e)
  }
}

当我对其进行单元测试时，我的代码是 . utnit.spec.js

jest.mock("axios", () => ({
   get: () => Promise.resolve({ data: [{ val: 1 }] })
}));


import { mount } from '@vue/test-utils';
import file from '../filefile';
import axios from "axios";


describe('file', () => {
  test('check comp. working correctly', () => {
    var wrapper = mount(file);
    afterEach(() => {
      wrapper.destroy()
    })
  })   
})

我在那里收到此警告，结果中没有数据

Exception:  TypeError: Cannot read property 'get' of undefined
          at VueComponent.mounted

我怎么知道这里有什么问题，是不是我无法访问单元文件中的axios 有没有什么具体方法可以在mounted hook中测试axios

Answer 1

错误意味着this.$axios.get 不可用，而不是axios.get。该组件依赖于通常安装在 Vue 应用入口点或 Nuxt 配置中的 Axios 插件。

可以在测试中为localVue Vue 实例安装，也可以直接提供给组件：

var wrapper = mount(file, { mocks: { $axios: axios } });

此外，如果 Axios 在某处用作 axios()，则模拟将失败，因为默认导入应该是一个函数：

jest.mock("axios", () => Object.assign(
  jest.fn(),
  { get: jest.fn() }
));

axios.get 是 Jest 间谍，根据使用情况对每个测试的实现进行模拟，并且不限于模拟中提供的硬编码 Promise.resolve({ data: ... })。