Mounting components (mount vs shallowMount) in Vue - Hands-On Comparison

Mounting Vue Components with mount vs shallowMount

📖 Scenario: You are testing a simple Vue component that shows a user's name and a button to greet them. You want to learn how to mount this component fully and shallowly to understand the difference.

🎯 Goal: Build a Vue test setup where you first mount the full component, then shallow mount it, and observe how child components behave in each case.

📋 What You'll Learn

Create a Vue component called UserGreeting with a child component GreetingMessage

Use mount from Vue Test Utils to fully mount UserGreeting

Use shallowMount from Vue Test Utils to shallow mount UserGreeting

Observe the difference in rendering between mount and shallowMount

💡 Why This Matters

🌍 Real World

Testing Vue components is essential to ensure they behave correctly before deploying apps. Understanding mount vs shallowMount helps write faster and more focused tests.

💼 Career

Vue developers and testers use these mounting methods daily to write unit tests that catch bugs early and improve code quality.

1

Create the Vue component with a child component

Create a Vue component called UserGreeting that includes a child component called GreetingMessage. The UserGreeting component should have a name prop set to 'Alice'. The GreetingMessage component should display Hello, Alice! using the name prop passed from UserGreeting.

Vue

// Define GreetingMessage component
// Define UserGreeting component with name prop 'Alice' and include GreetingMessage


  

Hint

Define two components using defineComponent. Pass the name prop from UserGreeting to GreetingMessage.

2

Import Vue Test Utils and set up mount

Import mount from @vue/test-utils. Create a variable called fullWrapper that mounts the UserGreeting component fully.

Vue

import { defineComponent } from 'vue'
// Your code here



  

Hint

Use import { mount } from '@vue/test-utils' and then const fullWrapper = mount(UserGreeting).

3

Set up shallowMount for shallow rendering

Import shallowMount from @vue/test-utils. Create a variable called shallowWrapper that shallow mounts the UserGreeting component.

Vue

import { defineComponent } from 'vue'
import { mount, shallowMount } from '@vue/test-utils'

// Your code here



  

Hint

Import shallowMount alongside mount and create shallowWrapper using shallowMount(UserGreeting).

4

Add template to show both wrappers for comparison

Add a template section that shows the HTML output of both fullWrapper and shallowWrapper by binding their html() results inside pre tags with labels Full Mount Output and Shallow Mount Output.

Vue

import { defineComponent } from 'vue'
import { mount, shallowMount } from '@vue/test-utils'

// Your code here



  

Hint

Use <pre> tags with aria-label for accessibility and bind fullWrapper.html() and shallowWrapper.html() inside them.