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'.

Practice

1. What is the main purpose of testing props in a Vue component?

easy

A. To check if the component receives the correct data from its parent

B. To verify the component's internal state changes

C. To ensure the component renders without errors

D. To test the component's CSS styles

Solution

1. Step 1: Understand what props are in Vue

   Props are how a parent component passes data to a child component.

2. Step 2: Identify the goal of testing props

   Testing props ensures the child component receives the right data as expected.

3. Final Answer:

   To check if the component receives the correct data from its parent -> Option A

4. Quick Check:

   Props test data passing = C [OK]

Hint: Props test data input from parent component [OK]

Common Mistakes:

• Confusing props testing with state testing
• Thinking props test styles or rendering only
• Assuming props test event emissions

2. Which Vue Test Utils method is used to check if an event was emitted by a component?

easy

A. trigger()

B. props()

C. emitted()

D. setData()

Solution

1. Step 1: Recall Vue Test Utils methods for events

   The method emitted() returns an object of events emitted by the component.

2. Step 2: Differentiate from other methods

   trigger() simulates DOM events, props() reads props, and setData() changes component data.

3. Final Answer:

   emitted() -> Option C

4. Quick Check:

   Check emitted events = emitted() = B [OK]

Hint: Use emitted() to see events fired by component [OK]

Common Mistakes:

• Using trigger() to check emitted events
• Confusing props() with emitted()
• Trying to use setData() for event checking

3. Given this test code:

const wrapper = mount(MyButton, { props: { label: 'Click' } })
await wrapper.find('button').trigger('click')
const events = wrapper.emitted()

What will events contain if MyButton emits a 'click' event on button click?

medium

A. {}

B. { click: [ 'Click' ] }

C. { click: [ [ 'Click' ] ] }

D. { click: [ [ ] ] }

Solution

1. Step 1: Understand emitted() output format

   emitted() returns an object where keys are event names and values are arrays of argument arrays for each emit.

2. Step 2: Analyze the event emission

   If the component emits 'click' without arguments, emitted().click is an array with empty arrays for each emit.

3. Final Answer:

   { click: [ [ ] ] } -> Option D

4. Quick Check:

   Event emitted without args = empty array inside emitted() = D [OK]

Hint: emitted() returns arrays of argument arrays per event [OK]

Common Mistakes:

• Assuming emitted event has string argument by default
• Confusing emitted() output structure
• Expecting emitted() to return flat arrays

4. What is wrong with this test code snippet?

const wrapper = mount(MyInput, { props: { value: 'test' } })
wrapper.find('input').trigger('input', { target: { value: 'new' } })
expect(wrapper.emitted('input')[0]).toEqual(['new'])

medium

A. trigger() should be awaited because it returns a promise

B. The emitted event name should be 'update:modelValue' instead of 'input'

C. The props should be passed as 'modelValue' not 'value'

D. The event payload should be an event object, not a string

Solution

1. Step 1: Check if trigger() needs awaiting

   In Vue Test Utils, trigger() returns a promise and should be awaited to ensure DOM updates.

2. Step 2: Verify test correctness

   Without await, the emitted event may not be registered before the expect runs, causing test failure.

3. Final Answer:

   trigger() should be awaited because it returns a promise -> Option A

4. Quick Check:

   Always await trigger() for event emission tests [OK]

Hint: Always await trigger() to catch emitted events [OK]

Common Mistakes:

• Not awaiting trigger() causing false negatives
• Mixing up prop names for v-model
• Expecting event payload as object instead of emitted args

5. You want to test a Vue component that emits a 'submit' event only if a prop 'isValid' is true. Which test approach correctly verifies this behavior?

hard

A. Mount component with isValid=true, trigger submit, expect no emitted event; then mount with isValid=false, trigger submit, expect emitted event

B. Mount component with isValid=false, trigger submit, expect no emitted event; then mount with isValid=true, trigger submit, expect emitted event

C. Mount component without props, trigger submit, expect emitted event regardless of isValid

D. Mount component with isValid=true, do not trigger submit, expect emitted event

Solution

1. Step 1: Understand conditional event emission

   The component emits 'submit' only if prop 'isValid' is true, so test must check both true and false cases.

2. Step 2: Design test cases accordingly

   Mount with isValid false and trigger submit to confirm no event; then mount with true and trigger submit to confirm event emitted.

3. Final Answer:

   Mount component with isValid=false, trigger submit, expect no emitted event; then mount with isValid=true, trigger submit, expect emitted event -> Option B

4. Quick Check:

   Test both prop states for conditional event emission [OK]

Hint: Test both true and false prop values for event emission [OK]

Common Mistakes:

• Testing only one prop state
• Expecting event without triggering action
• Ignoring prop effect on event emission