Testing props and events in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a prop in Vue components?

A prop is a way to pass data from a parent component to a child component. It allows the child to receive values and use them inside its template or logic.

beginner

How do you test if a Vue component correctly receives a prop?

You mount the component with the prop value set, then check if the component renders or behaves as expected using that prop.

beginner

What is an event in Vue and why do components emit events?

An event is a way for a child component to communicate back to its parent. Components emit events to notify parents about actions or changes.

intermediate

How do you test if a Vue component emits an event?

You simulate the action that should trigger the event, then check if the event was emitted with the correct name and payload.

beginner

Why is testing props and events important in Vue components?

Testing props and events ensures components receive data correctly and communicate properly, which helps avoid bugs and makes components reliable and reusable.

How do you pass data from a parent to a child component in Vue?

A Using directives

B Using props

C Using slots

D Using events

Props are used to pass data down from parent to child components.

What Vue method do you use to check if an event was emitted during testing?

A mount()

B trigger()

C emitted()

D props()

The emitted() method returns events emitted by the component during testing.

Which Vue testing library function is commonly used to mount a component for testing?

A mount()

B render()

C compile()

D create()

mount() creates a wrapper around the component for testing.

If a child component emits an event, who listens to it?

A The child component itself

B The Vuex store

C The Vue router

D The parent component

Parent components listen to events emitted by their children.

What should you check when testing a prop in a Vue component?

A If the component uses the prop value correctly

B If the component emits an event

C If the component has a slot

D If the component has styles

Testing props means verifying the component uses the passed data as expected.

Explain how to test a Vue component's prop and what you should verify.

Think about passing data and checking if the component shows or uses it.

Describe the process to test if a Vue component emits an event correctly.

Focus on simulating user action and checking emitted events.