Testing props and events in Vue - Step-by-Step Execution

Concept Flow - Testing props and events

Render Component with Props

↓

Component Receives Props

↓

User Interaction or Internal Logic

↓

Component Emits Event

↓

Test Listens for Event

↓

Assert Props and Event Data

The test renders the component with props, triggers events, listens for emitted events, and checks values.

Execution Sample

Vue

import { mount } from '@vue/test-utils'
import MyButton from './MyButton.vue'

const wrapper = mount(MyButton, { props: { label: 'Click me' } })
await wrapper.trigger('click')
expect(wrapper.emitted()).toHaveProperty('clicked')

This code mounts a button component with a label prop, triggers a click, and checks if 'clicked' event was emitted.

Execution Table

Step	Action	Props State	Event Emitted	Test Assertion
1	Mount component with label='Click me'	{ label: 'Click me' }	None	Props set correctly
2	Trigger click event on component	{ label: 'Click me' }	clicked	Event 'clicked' emitted
3	Check emitted events	{ label: 'Click me' }	clicked	Test passes: 'clicked' event found
4	Test ends	{ label: 'Click me' }	clicked	No more events, test complete

💡 Test ends after confirming 'clicked' event emitted and props are correct

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
props.label	undefined	'Click me'	'Click me'	'Click me'
emittedEvents	{}	{}	{ clicked: [[]] }	{ clicked: [[]] }

Key Moments - 2 Insights

Why do we check emitted events after triggering the click?

Because the component emits events only after user actions or internal logic, checking after click confirms the event was triggered (see execution_table step 2 and 3).

How do we know the prop was passed correctly to the component?

The prop value is set during mounting (step 1) and remains unchanged, so the test confirms the component received the correct prop (execution_table step 1).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of props.label after step 2?

A undefined

B 'Click me'

C null

D '' (empty string)

💡 Hint

Check variable_tracker row for props.label after Step 2

At which step does the component emit the 'clicked' event?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

See execution_table column 'Event Emitted' for each step

If the click event was not triggered, what would the emittedEvents variable look like after step 2?

A { clicked: [ [] ] }

B { click: [ [] ] }

C {}

D null

💡 Hint

Check variable_tracker for emittedEvents before and after triggering click

Concept Snapshot

Testing props and events in Vue:
- Mount component with props using mount()
- Trigger user events with wrapper.trigger()
- Listen for emitted events with wrapper.emitted()
- Assert props and events to verify behavior
- Helps ensure component reacts correctly to inputs and user actions

Full Transcript

This visual execution shows how to test Vue components by passing props and checking emitted events. First, the component is mounted with a prop 'label' set to 'Click me'. Then, a click event is triggered on the component. The test listens for the 'clicked' event emitted by the component after the click. The variable tracker shows the prop remains set and the emitted events object updates after the click. Key moments clarify why we check emitted events after triggering and how props are confirmed. The quiz questions reinforce understanding of prop values and event emission timing.