Find the Vue.js 3 version .

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 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.

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"
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:

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, {
      mocks: {
        $t: (msg) => msg
      }
    })
})

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

import { config } from "@vue/test-utils"
config.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.

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.

This guide discussed:

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