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

Question

我的应用程序网址具有全局属性/变量：

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（是的，那很愚蠢），但没有成功-我仍然收到该错误-请帮忙。

Answer 1

您可以使用vue-test-utils beta 15及更高版本来做到这一点。

这里docs

例如：

import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.mocks['$apiUrls'] = {
  ...
}

Answer 2

有两种方法可以实现此目的。如@Aldarund所述，一种方法是使用Config选项。您可以here来了解它。

如果您使用的是Jest，建议您在jest.init.js文件中执行此操作：

import VueTestUtils from '@vue/test-utils'

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

然后将其添加到jest的{​​{1}}部分：

package.json

现在，它已在全球范围内被嘲笑。如果要在每个测试的基础上执行此操作，则可以使用"setupFiles": [ "<rootDir>/jest.init.js" ] 安装选项：

mocks

希望这会有所帮助！

如果您有兴趣，我正在汇编有关如何测试Vue组件here的简单指南。它正在开发中，但是如果您需要其他有关测试Vue组件的相关帮助，请随时提出问题。

Answer 3

我认为上述答案不再有效（在2020年）。

这对我有用：

对于vue-test-utils 1.x.x（Vue 2）

1. 创建一个新文件，将其命名为。 jest.init.js
2. 提供以下内容：

import { config } from "@vue/test-utils";
config.mocks["yourGlobalProperty"] = label => label; //you can replace it with your own mock

1. 将此添加到您的jest.config.js中（实际上写为“ rootDir”，不要用真实路径替换任何内容）

module.exports = {
  setupFiles: ["<rootDir>/jest.init.js"]
}

这些文件仅在jest运行单元测试之前运行。

请注意，我要导入{config}，而不是默认导出。我不知道为什么默认设置对我不起作用。 Even the documentation for vue test utils doesn't import the default export anymore

还要确保您不尝试从旧的vue-test-utils包中导入。 （新的是@vue/test-utils）

对于@ vue / test-utils 2.x.x（vue-test-utils-next）（Vue 3）

请按照上述1.x.x的步骤进行操作，但在第二步中，请执行以下操作：

import { config } from "@vue/test-utils"; //2.0.0-beta.5
config.global.mocks = {
  yourGlobalProperty: label => label
};