How to mock global Vue.js variable in JEST test

You can do it with vue-test-utils beta 15 and later.

Here docs

And some example would be:

import VueTestUtils from '@vue/test-utils'

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

There is two ways to achieve this. One is using the Config option, as mentioned by @Aldarund. You can read about it here.

If you are using Jest, I recommend doing this in the jest.init.js file:

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

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

Then add this to the jest section of your package.json:

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

Now it is globally mocked. If you want to do this on a per test basis, you can use the mocks mounting option:

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

Hopefully this helps!

If you are interested I am compiling a collection of simple guides on how to test Vue components here. It's under development, but feel free to ask make an issue if you need help with other related things to testing Vue components.


I don't think the answers above work anymore (in 2020).

Here's what worked for me:

For vue-test-utils 1.x.x (Vue 2)

  1. Create a new file, name it eg. jest.init.js
  2. Give it the following content:
import { config } from "@vue/test-utils";
config.mocks["yourGlobalProperty"] = label => label; //you can replace it with your own mock
  1. Add this to your jest.config.js (actually write "rootDir", don't replace anything with a real path)
module.exports = {
  setupFiles: ["<rootDir>/jest.init.js"]
}

These files will be only ran before jest runs unit tests.

Note that I'm importing {config}, not the default export. I don't know why the default didn't work for me. Even the documentation for vue test utils doesn't import the default export anymore

Also make sure you're not trying to import from the old vue-test-utils package. (The new one is @vue/test-utils)

For @vue/test-utils 2.x.x (vue-test-utils-next) (Vue 3)

Follow steps like for 1.x.x above, but in step two, do this instead:

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