Mounting components (mount vs shallowMount) in Vue - Trade-offs & Expert Analysis

Overview - Mounting components (mount vs shallowMount)

What is it?

Mounting components means creating a test version of a Vue component so you can check how it behaves. There are two main ways: mount and shallowMount. Mount creates the full component with all its child components. ShallowMount creates the component but replaces child components with simple placeholders.

Why it matters

Testing components helps catch bugs early and ensures your app works as expected. Without mounting, you can't see how components behave or interact. Choosing between mount and shallowMount affects test speed and focus. Without this choice, tests might be slow or test too much at once, making debugging harder.

Where it fits

Before this, you should know basic Vue components and how to write simple tests. After this, you can learn about advanced testing techniques like mocking, spying, and testing asynchronous behavior.

Mental Model

Core Idea

Mounting a component means creating a live test version, and mount vs shallowMount decides how deep the test goes into child components.

Think of it like...

It's like testing a car: mount is like testing the whole car with all parts working, while shallowMount is like testing just the car body with the engine replaced by a simple model.

Component Test Mounting
┌───────────────┐
│ ParentComponent│
├───────────────┤
│               │
│  mount()      │
│  ┌─────────┐  │
│  │ Child1  │  │
│  └─────────┘  │
│  ┌─────────┐  │
│  │ Child2  │  │
│  └─────────┘  │
│               │
└───────────────┘

shallowMount()
┌───────────────┐
│ ParentComponent│
├───────────────┤
│               │
│  shallowMount()│
│  ┌─────────┐  │
│  │ Stub1   │  │
│  └─────────┘  │
│  ┌─────────┐  │
│  │ Stub2   │  │
│  └─────────┘  │
│               │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What is component mounting

Concept: Mounting means creating a test instance of a Vue component to check its behavior.

When you write tests for Vue components, you need to create a version of the component that you can interact with. Mounting is the process of creating this test version, which lets you check what the component renders and how it reacts to events.

Result

You get a live component instance in your test that you can inspect and interact with.

Understanding mounting is the first step to testing Vue components because it creates the environment where tests run.

2

Foundation

Difference between mount and shallowMount

Concept: mount creates a full component tree, shallowMount replaces child components with stubs.

Using mount means the component and all its child components are fully rendered. Using shallowMount means the component is rendered but child components are replaced with simple placeholders called stubs. This makes tests faster and more focused on the parent component.

Result

mount tests the full component tree; shallowMount tests only the parent component with stubs for children.

Knowing this difference helps you decide how deep your tests should go and how fast they run.

3

Intermediate

When to use mount in tests

🤔Before reading on: do you think mount is better for testing isolated components or full integration? Commit to your answer.

Concept: mount is best when you want to test the full behavior including child components.

Use mount when you want to see how the parent and child components work together. This is useful for integration tests where you check the full UI and interactions. For example, if a child component emits an event that the parent listens to, mount lets you test that flow.

Result

Tests cover full component behavior but may run slower and be more complex.

Understanding when to use mount helps you write tests that catch integration bugs between components.

4

Intermediate

When to use shallowMount in tests

🤔Before reading on: do you think shallowMount is better for testing component internals or isolating the parent? Commit to your answer.

Concept: shallowMount is best when you want to test the parent component alone, ignoring child details.

Use shallowMount when you want fast, focused tests on the parent component. Child components are replaced with stubs that do nothing but render a placeholder. This isolates the parent and avoids testing child logic, which should have its own tests.

Result

Tests run faster and focus on the parent component's logic and rendering.

Knowing when to use shallowMount helps keep tests simple and focused, improving maintainability.

5

Intermediate

How stubs work in shallowMount

Concept: Stubs replace child components with simple placeholders that do not run child logic.

When shallowMount replaces child components, it creates stubs that render as empty tags or simple placeholders. These stubs do not have any behavior or lifecycle methods. This means child components do not affect the test, and you can focus on the parent.

Result

Child components are ignored in the test, making it easier to isolate issues.

Understanding stubs clarifies how shallowMount isolates the parent component from its children.

6

Advanced

Limitations and pitfalls of shallowMount

🤔Before reading on: do you think shallowMount can catch bugs in child components? Commit to your answer.

Concept: shallowMount cannot test child component behavior or interactions deeply.

Because shallowMount replaces children with stubs, it cannot detect bugs inside child components or how they interact with the parent beyond simple rendering. If child components emit events or change state, shallowMount won't test those effects fully. This can lead to false confidence if child bugs exist.

Result

Tests may miss integration bugs between parent and children.

Knowing shallowMount's limits prevents over-reliance on it and encourages complementary full mount tests.

7

Expert

Customizing stubs and advanced mounting options

🤔Before reading on: do you think you can customize stubs to behave like real child components? Commit to your answer.

Concept: You can customize stubs to simulate child component behavior or selectively mount parts of the tree.

Vue Test Utils lets you customize stubs by providing your own components or templates. This allows you to simulate child behavior without full mounting. You can also selectively mount parts of the component tree or mock global components and plugins. These advanced options help balance test speed and coverage.

Result

Tests can be tailored to specific needs, improving accuracy and performance.

Understanding advanced mounting options unlocks powerful testing strategies for complex apps.

Under the Hood

Mounting creates a Vue component instance in a virtual DOM environment. mount renders the component and recursively renders all child components, creating a full component tree. shallowMount creates the parent component instance but replaces child components with stub components that render minimal placeholders. This is done by intercepting component resolution and substituting stubs during the render process.

Why designed this way?

Vue Test Utils was designed to give developers control over test depth and speed. Full mount tests provide realistic integration but can be slow and complex. shallowMount offers a faster, simpler alternative by isolating the parent component. This design balances thoroughness and efficiency, allowing developers to choose based on test goals.

Mounting Process
┌───────────────┐
│ mount()      │
│ ┌─────────┐  │
│ │ Parent  │  │
│ └─────────┘  │
│    │         │
│    ▼         │
│ ┌─────────┐  │
│ │ Child1  │  │
│ └─────────┘  │
│ ┌─────────┐  │
│ │ Child2  │  │
│ └─────────┘  │
└───────────────┘

shallowMount Process
┌───────────────┐
│ shallowMount()│
│ ┌─────────┐  │
│ │ Parent  │  │
│ └─────────┘  │
│    │         │
│    ▼         │
│ ┌─────────┐  │
│ │ Stub1   │  │
│ └─────────┘  │
│ ┌─────────┐  │
│ │ Stub2   │  │
│ └─────────┘  │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does shallowMount test child component logic fully? Commit yes or no.

Common Belief: shallowMount tests everything including child components fully.

Reality: shallowMount replaces child components with stubs, so it does not test their logic or behavior.

Why it matters: Believing this leads to missed bugs in child components and false confidence in tests.

Quick: Is mount always better than shallowMount for all tests? Commit yes or no.

Common Belief: mount is always better because it tests everything deeply.

Reality: mount tests are slower and more complex; shallowMount is better for fast, focused tests on the parent component.

Why it matters: Ignoring shallowMount can make tests slow and harder to maintain.

Quick: Can you customize stubs in shallowMount to simulate child behavior? Commit yes or no.

Common Belief: Stubs are fixed and cannot be customized.

Reality: You can customize stubs to simulate child components partially, improving test accuracy.

Why it matters: Knowing this allows more flexible and powerful testing strategies.

Quick: Does shallowMount prevent all integration bugs? Commit yes or no.

Common Belief: shallowMount catches all integration bugs between parent and children.

Reality: shallowMount cannot catch integration bugs involving child component internals.

Why it matters: Relying only on shallowMount can miss important bugs that appear in full integration.

Expert Zone

1

mount creates a full Vue component tree including lifecycle hooks, which can affect test timing and side effects.

2

shallowMount stubs can be customized with templates or components to simulate child behavior selectively.

3

Using shallowMount with global components or plugins requires careful mocking to avoid test failures.

When NOT to use

Do not use shallowMount when you need to test child component behavior or full integration. Instead, use mount or end-to-end testing tools. Avoid mount for very large component trees in unit tests to keep tests fast; use shallowMount or selective mounting instead.

Production Patterns

In real projects, shallowMount is used for fast unit tests focusing on single components. mount is used for integration tests where component interaction matters. Teams often combine both to balance speed and coverage. Custom stubs and mocks are used to simulate complex child components or global plugins.

Connections

Unit Testing

Mounting is a core technique in unit testing Vue components.

Understanding mount vs shallowMount helps write better unit tests by controlling test scope and dependencies.

Mocking in Software Testing

shallowMount uses stubs which are a form of mocking child components.

Knowing how stubs work connects Vue testing to general mocking concepts, improving test isolation skills.

Systems Engineering

Mount vs shallowMount parallels testing subsystems fully or isolating them with mocks.

Recognizing this pattern helps apply component testing ideas to complex system testing and integration strategies.

Common Pitfalls

#1 Testing a parent component with mount but ignoring child component side effects.

Wrong approach:

const wrapper = mount(ParentComponent)
// Test parent but child emits or changes state unnoticed

Correct approach:

const wrapper = mount(ParentComponent)
// Also assert child component events and state changes explicitly

Root cause:

Assuming mount automatically tests all child behavior without explicit assertions.

#2 Using shallowMount but expecting child component methods to run.

Wrong approach:

const wrapper = shallowMount(ParentComponent)
wrapper.findComponent(ChildComponent).vm.someMethod()

Correct approach:

Use mount if you need to call child methods, or mock child methods in stubs.

Root cause:

Misunderstanding that shallowMount replaces children with stubs lacking real methods.

#3 Overusing mount for all tests causing slow test suites.

Wrong approach:

const wrapper = mount(ParentComponent)
// Used for every test regardless of need

Correct approach:

Use shallowMount for simple unit tests and mount only for integration tests.

Root cause:

Not balancing test depth and speed leads to inefficient testing.

Key Takeaways

Mounting creates a live test instance of a Vue component to check its behavior.

mount renders the full component tree including all child components, while shallowMount replaces children with simple stubs.

Use mount for integration tests that need full component interaction and shallowMount for fast, isolated unit tests.

shallowMount stubs child components, so it cannot test their internal logic or interactions deeply.

Advanced testing can customize stubs and selectively mount parts of the component tree for better balance of speed and coverage.

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