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

Posted 2023-02-22

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

【英文标题】：VueComponent.mounted : TypeError: Cannot read property 'get' of undefined in mounted hook

【发布时间】：2020-12-27 13:52:30

【问题描述】：

我在 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

【问题讨论】：

你必须模拟 axios

我有这样的模拟 axios jest.mock("axios", () => ( get: () => Promise.resolve( data: [ val: 1 ] ) ));但同样的问题

【参考方案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: ... )。

【讨论】：

非常感谢，当我做 console.log(wrapper.vm.res) 我得到了... [ val: [Getter/Setter] ] 所以你能建议我在哪里可以阅读关于所有的笑话或简要说明

或者像我可以在重新爱之后设置承诺的价值我会得到什么

wrapper.vm.res 未在问题中提供，并且与 Axios 问题无关。控制台输出意味着 res 是一个对象数组。请参阅jestjs.io/docs/en/mock-function-api 以及其他可能与模拟相关的章节。您需要在预期调用之前就地执行axios.get.mockResolvedValueOnce( data: ... )。

我的坏！所以 wrapper.vm.result 是。 [ val: [Getter/Setter] ] ，这是什么意思。我也做了你建议的改变，在 jest.mock("axios", () => Object.assign( jest.fn(), get: jest.fn() ));我编码 axios.get.mockResolvedValueOnce( data: val :1 ) 但即使在那之后我也没有得到 [ val: [Getter/Setter] ] ，所以没有得到如何解决它，谢谢非常感谢您的回答，请您帮帮我

res 是 mock 提供的一个数组，这意味着它被正确地模拟，并且依赖它的组件应该可以正常工作。 res 被 Vue 转换为反应式，这就是它在控制台输出中看起来像这样的原因。请参阅 vuejs.org/v2/guide/reactivity.html 了解其工作原理。