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.

Practice

1. What is the main difference between mount and shallowMount in Vue testing?

easy

A. mount is used only for functional components, while shallowMount is for stateful components.

B. mount only renders the component's template without any logic, while shallowMount renders the full component with logic.

C. mount renders the component and all its child components fully, while shallowMount renders the component but replaces child components with placeholders.

D. mount skips rendering child components, while shallowMount renders all children fully.

Solution

1. Step 1: Understand mount behavior

   mount renders the component and all its children fully, meaning the entire component tree is rendered.

2. Step 2: Understand shallowMount behavior

   shallowMount renders the component but replaces child components with placeholders, isolating the component under test.

3. Final Answer:

   mount renders full tree; shallowMount replaces children with placeholders -> Option C

4. Quick Check:

   mount = full render, shallowMount = shallow render [OK]

Hint: mount = full render, shallowMount = isolate children [OK]

Common Mistakes:

• Confusing which method renders children fully
• Thinking shallowMount runs component logic without children
• Assuming mount skips child components

2. Which of the following is the correct syntax to import and use shallowMount from Vue Test Utils?

easy

A. import { mount } from '@vue/test-utils'; const wrapper = mount(MyComponent);

B. import { shallowMount } from '@vue/test-utils'; const wrapper = shallowMount(MyComponent);

C. import shallowMount from 'vue-test-utils'; const wrapper = shallowMount(MyComponent);

D. const wrapper = shallowMount(MyComponent) from '@vue/test-utils';

Solution

1. Step 1: Check import statement

   The correct import for shallowMount is from '@vue/test-utils' using named import syntax: import { shallowMount } from '@vue/test-utils';

2. Step 2: Check usage syntax

   Usage is const wrapper = shallowMount(MyComponent); which matches import { shallowMount } from '@vue/test-utils'; const wrapper = shallowMount(MyComponent);.

3. Final Answer:

   import { shallowMount } from '@vue/test-utils'; const wrapper = shallowMount(MyComponent); -> Option B

4. Quick Check:

   Correct import and usage = import { shallowMount } from '@vue/test-utils'; const wrapper = shallowMount(MyComponent); [OK]

Hint: Use named import { shallowMount } from '@vue/test-utils' [OK]

Common Mistakes:

• Using default import instead of named import
• Incorrect import path or syntax
• Calling shallowMount without importing

3. Given the following Vue test code, what will wrapper.html() include?

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

const wrapper = shallowMount(Parent);
console.log(wrapper.html());

Assuming Parent has a child component Child used in its template.

medium

A. Only the HTML of Parent with <child-stub> placeholder instead of Child components.

B. Only the Child component's HTML without Parent's template.

C. An empty string because shallowMount does not render anything.

D. The full HTML of Parent and all rendered Child components.

Solution

1. Step 1: Understand shallowMount behavior

   shallowMount renders the component but replaces child components with stubs (placeholders).

2. Step 2: Analyze output of wrapper.html()

   The HTML will include Parent's template with <child-stub> tags instead of full Child component HTML.

3. Final Answer:

   Parent HTML with child components replaced by <child-stub> placeholders -> Option A

4. Quick Check:

   shallowMount = stubs children [OK]

Hint: shallowMount replaces children with stubs in HTML output [OK]

Common Mistakes:

• Expecting full child component HTML with shallowMount
• Thinking shallowMount returns empty HTML
• Confusing mount and shallowMount output

4. You wrote this test code but get an error: TypeError: mount is not a function. What is the likely cause?

import { shallowMount } from '@vue/test-utils';
const wrapper = mount(MyComponent);

medium

A. The component MyComponent is not defined.

B. You should use shallowMount instead of mount always.

C. You need to call mount() as a method on shallowMount.

D. You forgot to import mount from '@vue/test-utils'.

Solution

1. Step 1: Check imports

   The code imports only shallowMount but tries to call mount, which is not imported.

2. Step 2: Understand error cause

   Since mount is undefined, calling it causes TypeError: mount is not a function.

3. Final Answer:

   Forgot to import mount from '@vue/test-utils' -> Option D

4. Quick Check:

   Import mount to use mount() [OK]

Hint: Import mount before using it to avoid TypeError [OK]

Common Mistakes:

• Assuming shallowMount can be used as mount
• Not importing mount at all
• Misunderstanding error message

5. You want to test a Vue component that uses a complex child component which makes API calls. To isolate your test and avoid network requests, which mounting method should you use and why?

hard

A. Use shallowMount to replace child components with stubs, isolating the parent component and avoiding API calls.

B. Use mount to render everything fully, including child components, to test integration.

C. Use mount but mock the API calls inside child components manually.

D. Use neither; test only the child component separately.

Solution

1. Step 1: Identify test goal

   You want to isolate the parent component and avoid network requests from child components.

2. Step 2: Choose mounting method

   shallowMount replaces child components with stubs, so child components' API calls won't run, isolating the test.

3. Step 3: Compare alternatives

   mount renders full tree, causing API calls unless mocked manually, which is more complex.

4. Final Answer:

   Use shallowMount to isolate parent and avoid child API calls -> Option A

5. Quick Check:

   shallowMount isolates component, avoids child side effects [OK]

Hint: Use shallowMount to isolate and avoid child side effects [OK]

Common Mistakes:

• Using mount and forgetting to mock child API calls
• Thinking mount automatically isolates children
• Ignoring child component effects in tests