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.