# Mocking global objects

vue-test-utils provides a simple way to mock global objects attached to Vue.prototype, both on test by test basis and to set a default mock for all tests.

The test used in the following example can be found here.

# The mocks mounting option

The mocks mounting option is one way to set the value of any properties attached to Vue.prototype. This commonly includes:

• $store, for Vuex
• $router, for Vue Router
• $t, for vue-i18n

and many others.

# Example with vue-i18n

Use with Vuex and Vue Router are discussed in the respective sections, here and here. Let's see an example with vue-i18n. While it would be possible to use createLocalVue and install vue-i18n for each test, that would quickly get cumbersome and introduce a lot of boilerplate. First, a <Bilingual> component that uses vue-i18n:

<template> <div class="hello"> {{ $t("helloWorld") }} </div> </template> <script> export default { name: "Bilingual" } </script> 

The way vue-i18n works is you declare your translation in another file, then reference them with $t. For the purpose of this test it doesn't really matter what the translation file looks like, but for this component it could look like this:

export default { "en": { helloWorld: "Hello world!" }, "ja": { helloWorld: "こんにちは、世界！" } } 

Based on the locale, the correct translation is rendered. Let's try and render the component in a test, without any mocking.

import { mount } from "@vue/test-utils" import Bilingual from "@/components/Bilingual.vue" describe("Bilingual", () => { it("renders successfully", () => { const wrapper = mount(Bilingual) }) }) 

Running this test with yarn test:unit throws a huge stack trace. If you look through the output carefully, you can see:

"TypeError: _ctx.$t is not a function" 

This is because we did not install vue-i18n, so the global $t method does not exist. Let's mock it using the mocks mounting option:

import { mount } from "@vue/test-utils" import Bilingual from "@/components/Bilingual.vue" describe("Bilingual", () => { it("renders successfully", () => { const wrapper = mount(Bilingual, { global: { mocks: { $t: (msg) => msg } } }) }) }) 

Now the test passes! There are lots of uses for the mocks option. Most frequently I find myself mocking the global objects provided by the three packages mentioned above.

# Settings default mocks using config

Sometimes you want to have a default value for the mock, so you don't create it on a test by test basis. You can do this using the config API provided by vue-test-utils. Let's expand the vue-i18n example. You can set default mocks anywhere by doing the following:

import { config } from "@vue/test-utils" config.global.mocks = { mock: "Default Mock Value" } 

The demo project for this guide is using Jest, so I will declare the default mock in jest.init.js, which is loaded before the tests are run automatically. I will also import the example translations object from earlier, and use it in the mock implementation.

import { config } from "@vue/test-utils" import translations from "./src/translations.js" const locale = "en" config.global.mocks = { $t: (msg) => translations[locale][msg] } 

Now a real translation will be rendered, despite using a mocked $t function. Run the test again, this time using console.log on wrapper.html() and removing the mocks mounting option:

describe("Bilingual", () => { it("renders successfully", () => { const wrapper = mount(Bilingual) console.log(wrapper.html()) }) }) 

The test passes, and the following markup is rendered:

<div class="hello"> Hello world! </div> 

You can read about using mocks to test Vuex here. The technique is the same.

# Conclusion

This guide discussed:

• using global.mocks to mock a global object on a test by test basis
• using config.global.mocks to set a default mock