Testing props and events in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a prop named title with value 'Hello' to the component.

Vue

<MyComponent :title=[1] />

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

A"Hello"

B'Hello'

CHello

D{Hello}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the prop without quotes causes an error.

Using curly braces inside the binding is incorrect.

In Vue, props passed as strings should be enclosed in single or double quotes. Here, 'Hello' is correct.

2fill in blank

medium

Complete the code to emit an event named submit with payload data inside the component.

Vue

this.$emit([1], data);

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

A'submit'

Bsubmit

C{submit}

D"submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the event name causes errors.

Using curly braces around the event name is invalid.

The event name must be a string, so it should be in quotes. Single quotes are common in Vue.

3fill in blank

hard

Fix the error in the test code to correctly mount the component with a prop count set to 5.

Vue

const wrapper = mount(MyComponent, { props: { count: [1] } });

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

A"5"

B'5'

C5

D{5}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing numbers as strings causes type mismatch.

Using curly braces around numbers is invalid.

Props that are numbers should be passed as numbers, not strings.

4fill in blank

hard

Fill both blanks to test that the component emits update event with payload 42.

Vue

await wrapper.vm.$emit([1], [2]);
expect(wrapper.emitted()).toHaveProperty('update');

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

A'update'

B42

C43

D'updateEvent'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event name or payload causes test failure.

Not using quotes for event name causes errors.

The event name is 'update' and the payload is the number 42.

5fill in blank

hard

Fill all three blanks to create a test that mounts MyComponent with prop visible true, triggers close event, and asserts it was emitted.

Vue

const wrapper = mount(MyComponent, { props: { [1]: [2] } });
await wrapper.vm.$emit([3]);
expect(wrapper.emitted()).toHaveProperty('close');

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

Avisible

Btrue

C'close'

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using string 'true' instead of boolean true for prop.

Not quoting the event name string.

Using wrong prop or event names.

The prop name is visible set to true. The event emitted is 'close'.