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.