Mounting components (mount vs shallowMount) in Vue - Visual Side-by-Side Comparison

Concept Flow - Mounting components (mount vs shallowMount)

Choose mount method

↓

mount

↓

Full DOM render

↓

Access all child elements

↓

Run tests on full tree

↓

Test results

This flow shows choosing between full mounting or shallow mounting a Vue component for testing, affecting how child components are handled.

Execution Sample

Vue

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

const wrapperFull = mount(Parent)
const wrapperShallow = shallowMount(Parent)

This code mounts a Vue component fully and shallowly to compare how child components are rendered in tests.

Execution Table

Step	Mount Method	Child Components Rendered?	DOM Depth	Test Focus
1	mount	Yes, full render	Full DOM tree	Includes children and parent
2	shallowMount	No, stubbed	Only parent component	Isolates parent component
3	mount	Yes, full render	Full DOM tree	Can test child behavior
4	shallowMount	No, stubbed	Only parent component	Faster, less complex
5	End	-	-	Tests complete

💡 Tests stop after mounting and rendering components fully or shallowly to check behavior.

Variable Tracker

Variable	Start	After mount	After shallowMount	Final
wrapperFull	undefined	Full DOM with children	Full DOM with children	Full DOM with children
wrapperShallow	undefined	undefined	Parent only, children stubbed	Parent only, children stubbed

Key Moments - 3 Insights

Why do child components appear in mount but not in shallowMount?

Because mount renders the full DOM tree including children (see execution_table rows 1 and 2), while shallowMount replaces child components with stubs to isolate the parent.

Does shallowMount allow testing child component behavior?

No, shallowMount stubs children so you cannot test their internal behavior directly (see execution_table row 2). Use mount for full child testing.

Which mount method is faster for isolated component tests?

shallowMount is faster because it avoids rendering child components fully, reducing complexity (see execution_table row 4).

Visual Quiz - 3 Questions

Look at the execution_table, what does shallowMount render at step 2?

A Only parent component with children stubbed

B Full DOM tree including children

C No components rendered

D Only child components

💡 Hint

Check execution_table row 2 under 'Child Components Rendered?' and 'DOM Depth'

At which step does mount render the full DOM tree?

A Step 4

B Step 2

C Step 1

D Step 5

💡 Hint

See execution_table row 1 for mount method and DOM depth

If you want to test child component behavior, which method should you use?

A shallowMount

B mount

C Neither

D Both

💡 Hint

Refer to key_moments about child component rendering and testing

Concept Snapshot

Mounting Vue components for tests:
- mount: renders full DOM tree including children
- shallowMount: stubs child components, renders parent only
- Use mount to test full component behavior
- Use shallowMount for isolated, faster tests
- Choose based on test focus and complexity

Full Transcript

This lesson shows how Vue test-utils mount and shallowMount methods work. mount renders the full component tree including all child components, allowing tests to check full DOM and child behavior. shallowMount replaces child components with stubs, isolating the parent component for faster, simpler tests. The execution table traces steps showing mount rendering full DOM and shallowMount rendering only the parent. Variable tracking shows wrapperFull holds full DOM, wrapperShallow holds stubbed children. Key moments clarify common confusions about child rendering and test scope. Visual quizzes check understanding of which method renders children and when to use each. The snapshot summarizes the key differences and use cases for mount vs shallowMount in Vue testing.