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

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mount a Vue component fully using Vue Test Utils.

Vue

import { [1] } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

const wrapper = [1](MyComponent);

Drag options to blanks, or click blank then click option'

Arender

Bmount

CcreateApp

DshallowMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using shallowMount instead of mount causes child components not to render.

Using createApp is for app initialization, not testing.

Use mount to fully mount the component including its child components.

2fill in blank

medium

Complete the code to mount a Vue component shallowly, stubbing child components.

Vue

import { [1] } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

const wrapper = [1](MyComponent);

Drag options to blanks, or click blank then click option'

AcreateApp

Bmount

Crender

DshallowMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using mount instead of shallowMount renders all child components.

Using render is not a Vue Test Utils function.

shallowMount mounts the component but replaces child components with stubs.

3fill in blank

hard

Fix the error in the test code by choosing the correct mounting method to stub child components.

Vue

import { [1] } from '@vue/test-utils';
import ParentComponent from './ParentComponent.vue';

const wrapper = [1](ParentComponent);

expect(wrapper.findComponent({ name: 'ChildComponent' }).text()).toBe('');

Drag options to blanks, or click blank then click option'

AshallowMount

Bmount

Crender

DcreateApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using mount renders child components fully, so the test fails.

Using createApp is not for testing.

Use shallowMount to stub child components so they don't render fully.

4fill in blank

hard

Fill both blanks to mount a component shallowly and check if a child component is stubbed.

Vue

import { [1] } from '@vue/test-utils';
import Parent from './Parent.vue';

const wrapper = [1](Parent);

const childStub = wrapper.findComponent({ name: '[2]' });
expect(childStub.exists()).toBe(true);

Drag options to blanks, or click blank then click option'

AshallowMount

Bmount

CChildComponent

DParentComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using mount instead of shallowMount renders the child fully.

Using the wrong component name to find the stub.

Use shallowMount to stub child components, and check for the stub by the child's name.

5fill in blank

hard

Fill all three blanks to mount a component fully, pass props, and check the rendered text.

Vue

import { [1] } from '@vue/test-utils';
import Greeting from './Greeting.vue';

const wrapper = [1](Greeting, {
  props: { message: '[2]' }
});

expect(wrapper.text()).toContain('[3]');

Drag options to blanks, or click blank then click option'

Amount

BHello, Vue!

DshallowMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using shallowMount will stub child components and may not render text fully.

Not passing props correctly causes the test to fail.

Use mount to fully render the component with props, then check the text includes the message.