无涯教程网

如何在 JEST 测试中模拟全局 Vue.js 变量

发布于07月07日

我的应用程序URL有一个全局属性/变量:

Vue.prototype.$apiUrls = {
  root: 'http://localhost:8080/',
  api: 'api/v1/'
  // etc.  
}

根据axios的要求，我在我的组件中使用它:

axios.get(`${this.$apiUrls.root}${this.$apiUrls.api}/users/`)

现在我想测试我的组件代码，我已经模拟了axios个，但仍然收到一个错误:

TypeError: Cannot read property '$apiUrls' of undefined

我试图在每个测试和/或JEST的设置文件中定义/模拟这个属性，比如.

global.$apiUrls = {...}
// or
Vue.prototype.$apiUrls = {...}
// or
Object.defineProperties(Vue.prototype, {$apiUrls: {...}})

我也试着把它调到window或this(是的，这很愚蠢)，但没有成功——我仍然收到那个错误——请帮忙.

推荐答案

实现这一点有两种方法.一个是使用Config选项，如@Aldarund所述.你可以读here本.

如果您使用的是Jest，我建议您在jest.init.js文件中这样做:

import { config } from '@vue/test-utils'

config.mocks['$apiUrls'] = {
  'some/endpoint'
}

然后将此添加到package.json的jest部分:

"setupFiles": [
  "<rootDir>/jest.init.js"
]

现在全球都在嘲笑它.如果要在每次测试的基础上执行此操作，可以使用mocks安装选项:

const wrapper = shallowMount(Foo, {
  mocks: {
    $apiUrls: 'some/endpoint'
  }
})

希望这有帮助！

如果您感兴趣，我正在编译一系列关于如何测试Vue组件的简单指南.它正在开发中，但如果您在测试Vue组件的其他相关方面需要帮助，请随时提出问题.

Vue.js相关问答推荐

NUXT 3 在客户端获取数据

vuetify/mdi 不显示图标

更改 Vuetify 轮播高度

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

如何在 Laravel 中包含 Bootstrap-Vue

vuejs中watch方法和计算方法有什么区别

如何将 Nuxt.js 更新到最新版本

如何将 vuetify 2.0 beta 安装到新的 vue cli 项目中？

如何告诉 Vue 应用使用 Firebase 模拟器？

如何在 vue 3 中获取路由的参数？

Vue.js：TypeError：无法设置只有 getter 的 #