Mounting components (mount vs shallowMount) in Vue - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

Difference in rendered output between mount and shallowMount

Given a Vue component that includes a child component, what will be the difference in the rendered output when using mount versus shallowMount?

Vue

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

// ParentComponent template:
// <template>
//   <div>
//     <ChildComponent />
//   </div>
// </template>

// ChildComponent template:
// <template>
//   <span>Child Content</span>
// </template>

A mount renders only ParentComponent without ChildComponent; shallowMount renders both ParentComponent and ChildComponent fully.

B mount replaces ChildComponent with a stub; shallowMount fully renders ChildComponent inside ParentComponent.

C mount and shallowMount both fully render ParentComponent and ChildComponent with no difference.

D mount renders ParentComponent and fully renders ChildComponent inside it; shallowMount renders ParentComponent but replaces ChildComponent with a stub.

💡 Hint

Think about how shallowMount avoids rendering child components fully to isolate the parent.

mount renders the component and all its child components fully, showing the complete DOM tree. shallowMount renders the component but replaces child components with simple placeholders (stubs) to isolate the parent component's behavior.

❓ state_output

intermediate

Effect of shallowMount on child component lifecycle hooks

When using shallowMount on a Vue component with child components, which lifecycle hooks of the child components are called?

Vue

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

// ChildComponent has a mounted() hook that sets a data property.

A Child components lifecycle hooks are called normally as if fully mounted.

B Child components lifecycle hooks like mounted() are not called because they are stubbed.

C Only created() hooks of child components are called, but not mounted().

D Child components lifecycle hooks are called twice due to shallowMount behavior.

💡 Hint

Consider what shallowMount does to child components in the render tree.

shallowMount replaces child components with stubs, so their lifecycle hooks like mounted() do not run. This helps isolate the parent component during testing.

🔧 Debug

advanced

Why does a test fail when using shallowMount instead of mount?

A test expects a child component's rendered text to be present, but it fails when using shallowMount. Why?

Vue

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

const wrapper = shallowMount(ParentComponent);
expect(wrapper.text()).toContain('Child Content');

A Because shallowMount replaces child components with stubs, the child's text is not rendered in the output.

B Because shallowMount does not mount the parent component at all, so no text is rendered.

C Because shallowMount mounts child components twice, confusing the test.

D Because shallowMount causes a syntax error preventing rendering.

💡 Hint

Think about what shallowMount does to child components in the DOM.

shallowMount replaces child components with stubs, so their internal template content like 'Child Content' does not appear in the rendered output. The test fails because it expects that text.

📝 Syntax

advanced

Correct usage of mount and shallowMount with options

Which option correctly mounts a Vue component with a stub for a child component named 'ChildComponent' using shallowMount?

Vue

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

A shallowMount(ParentComponent, { global: { stubs: { ChildComponent: true } } })

B shallowMount(ParentComponent, { stubs: ['ChildComponent'] })

C shallowMount(ParentComponent, { stubs: { ChildComponent: false } })

D shallowMount(ParentComponent, { global: { components: { ChildComponent: true } } })

💡 Hint

Check the correct property name and structure for stubbing in Vue Test Utils v3+.

In Vue Test Utils v3+, stubs are passed inside the global option as stubs. Setting ChildComponent: true creates a stub for it.

🧠 Conceptual

expert

Why choose shallowMount over mount in large component trees?

In a large Vue application with deeply nested components, why might a developer prefer using shallowMount instead of mount for unit tests?

A shallowMount renders all child components fully, providing more complete integration testing.

B shallowMount automatically fixes bugs in child components during tests.

C shallowMount improves test speed and isolates the component by not rendering child components fully, reducing complexity.

D shallowMount disables all lifecycle hooks in the parent component to speed up tests.

💡 Hint

Think about test isolation and performance when testing components with many children.

shallowMount helps keep tests focused on the component under test by stubbing child components. This reduces test runtime and avoids failures caused by unrelated child components.

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