The difference between Vue-Test-Utils' "mount" and "shallowMount"?

javascript vue.js jestjs vue-test-utils
AnonymousAngelo picture AnonymousAngelo · Nov 9, 2018 · Viewed 6.9k times · Source

Disclaimer: I am pretty new to Vue, JavaScript, and web frameworks in general.

I'm trying to familiarise myself with some basic unit and component tests using Jest and vue-test-utils.

I have read the docs on vue-test-utils' mount() and shallowMount() , but I'm not sure when to use the one over the other (they appear to be very similar).

According to the docs on shallowMount():

Like mount, it creates a Wrapper that contains the mounted and rendered Vue component, but with stubbed child components.

What exactly is meant by "stubbed child components"? Can mount() and shallowMount() be used interchangeably?

Answer

Thomas Ferro picture Thomas Ferro · Nov 9, 2018

What the documentation means by "stubbed child components" is that every components within the tested one will not be rendered. Instead, you will have a placeholder component.

This prevent your tests to be parasite by other component's behaviors.

In my opinion, you should always shallow mount your components when doing unit tests, and simply mount them when doing tests in your entire application.

Related questions

vue-test-util click trigger on button not firing

I have a Vue component with a button. On a button click, a method is called. I am using Jest for unit test. I expected .trigger method from vue-test-utils to create a synthetic event on the button, but it does …

Read More
How to update snapshot with Jest and vue-cli

I should be able to add -u parameter when running my tests, but I can't figure out why it doesn't work: npm run test ComponentName.spec.js -u npm run test ComponentName.spec.js --updateSnapshot but it doesn't work. My …

Read More
How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More