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

, for Vuex $router , for Vue 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 :

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:

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

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:

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:

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:

The test passes, and the following markup is rendered:

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

Conclusion

This guide discussed: