How to use mock Global object in vue-test-utils

Editor to share with you how to use mock global objects in vue-test-utils, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Vue-test-utils provides a simple way to mock Vue.prototype, not only for test cases, but also to set the default mock for all tests.

Mocks load option

The mocks load option is a way to attach any attribute to the Vue.prototype. This usually includes:

$store, for Vuex

$router, for Vue Router

$t, for vue-i18n

And everything else.

The example of vue-i18n

Let's look at an example of vue-i18n. Although you can use createLocalVue and install vue-i18n for each test, that can make things difficult and introduce a bunch of templates. First, the component uses vue-i18n:

{{$t ("helloWorld")}} export default {name: "Bilingual"}

You first translate in another file, and then quote it through $t, which is how vue-i18n works. In this test, although you don't really care what the translated file looks like, take a look at what is used this time:

Export default {"en": {helloWorld: "Hello world!"}, "ja": {helloWorld: "World!" }}

Based on this locale, the correct translation will be rendered. Instead of mock, let's try to render the component in the test:

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

Running the test through yarn test:unit throws a stack of errors. If you take a closer look at the output, you will find:

[Vue warn]: Error in config.errorHandler: "TypeError: _ vm.$t is not a function"

This is because we do not have vue-i18n installed, so the global $t method does not exist. Let's try the mocks loading option:

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

Now the test has passed! The mocks option is of many uses, and I think the most commonly used are the three mentioned at the beginning.

(translation note: in this way, it is not possible to couple language-specific content in a unit test, because the translation function is actually invalid, and it is even more impossible to handle optional parameters, etc.)

Use configuration to set the default mocks

Sometimes you need a default value for mock so that you don't have to set it for each test case. It can be implemented with config API provided by vue-test-utils. Or an example of vue-i18n:

Import VueTestUtils from "@ vue/test-utils" VueTestUtils.config.mocks ["mock"] = "Default Mock Value"

Jest is used in this example, so I'll describe the default mock in the jest.init.js file-- which is automatically loaded before the test runs. At the same time, I will also import and apply the translation objects previously used for the example.

/ / jest.init.jsimport VueTestUtils from "@ vue/test-utils" import translations from ". / src/translations.js" const locale = "en" VueTestUtils.config.mocks ["$t"] = (msg) = > translations [locale] [msg]

Now, although you still use a mock $t function, it will render a real translation. Run the test again, this time removing the mocks load option and printing wrapper.html () with console.log.

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

The test passed, and the following structures are rendered:

Hello world! The above is all the content of the article "how to use mock Global objects in vue-test-utils". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!