by Sai gowtham

Difference between mount and shallowMount in Vue test utils

In this tutorial, we are going to learn about the difference between mount and shallowMount methods in vue test utils.

checkout my Vue unit testing tutorial.

mount method

The mount method takes the Vue component as a first argument and returns its vue instance along with some helper which is used to interact with a component instance like set props, trigger clicks, etc.

shallowMount method

The shallowMount method also works similar to the mount method the main difference is shallowMount doesn’t render child components so that it allows us to test the component in isolation to make sure that child components are not included in the test.

Let’s see an example.

consider we have two files in our Vue app which are Home.vue and App.vue.

Home.vue
<template>
  <h1>Home</h1>
</template>

<script>
export default {};
</script>
App.vue
<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <Home /> //child component
  </div>
</template>

<script>
import Home from "./components/Home";
export default {
  data: function() {
    return {
      msg: "Hello"
    };
  },
  components: {
    Home
  }
};
</script>

Inside the App.vue we imported Home component and added to the App component template.

Let’s test an App component now.

App.test.js
import App from '../src/App.vue'
import { mount } from '@vue/test-utils';
describe('Testing App component', () => {
    it('checks textcontent to Hello ', () => {
        const wrapper = mount(App);        expect(wrapper.text()).toBe('Hello');
    })
})

Now run the test and you can see the test is failed.

mount-method

Jest is clearly showing Received value Hello Home but the expected value is Home.

Our test is failed because of mount method is rendered App component along with Home component so that we are receiving text content values from both components, we can solve this problem by using shallowMount method.

App.test.js
import App from '../src/App.vue'
import { mount, shallowMount } from '@vue/test-utils';
describe('Testing App component', () => {
    it('checks textcontent to Hello ', () => {
        const wrapper = shallowMount(App);        expect(wrapper.text()).toBe('Hello');
    })
})

Now no children have been rendered and our test is passed.

shallow-mount

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course