Component testing with Vue Test Utils - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the mount function from Vue Test Utils.

Vue

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

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

AshallowMount

Brender

CcreateApp

Dmount

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' instead of 'mount' will cause errors.

Using 'createApp' is for app initialization, not testing.

The mount function is used to create a wrapper for the component in tests.

2fill in blank

medium

Complete the code to mount the HelloWorld component in the test.

Vue

const wrapper = [1](HelloWorld);

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

Amount

BcreateApp

Crender

DshallowMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' will not create a wrapper object.

Using 'shallowMount' renders without child components.

Use mount to fully render the component for testing.

3fill in blank

hard

Fix the error in the test assertion to check the component text content.

Vue

expect(wrapper.text()).toBe([1]);

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

A'Hello World!'

B`Hello World!`

C"Hello World!"

DHello World!

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes causes syntax errors.

Using backticks is valid but not the expected answer here.

The expected value must be a string literal, so it needs quotes.

4fill in blank

hard

Fill both blanks to find a button and trigger a click event in the test.

Vue

const button = wrapper.find([1]);
await button.[2]('click');

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

A"button"

Bclick

Ctrigger

D"#submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click()' directly on the wrapper is incorrect.

Not quoting the selector causes errors.

Use find("button") to select the button element and trigger('click') to simulate the click event.

5fill in blank

hard

Fill all three blanks to create a test that mounts a component, triggers a click, and checks emitted events.

Vue

const wrapper = [1](MyButton);
await wrapper.find('button').[2]('click');
expect(wrapper.emitted()).toHaveProperty([3]);

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

Amount

Btrigger

C'click'

DshallowMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'shallowMount' instead of 'mount' changes test behavior.

Forgetting quotes around event name causes errors.

This test mounts the component, triggers a click event, and checks if the 'click' event was emitted.