How to Test Props in Vue: Simple Guide with Examples

To test props in Vue, use Vue Test Utils to mount the component with the desired props and then check if the component renders or behaves correctly based on those props. You can access the passed props via the wrapper and assert their effects in your test.

Syntax

Use mount from Vue Test Utils to create a component instance with props. Pass an object with props as the second argument to mount. Then, use wrapper methods to check the rendered output or component state.

• mount(Component, { props: { propName: value } }): mounts component with props
• wrapper.props(): returns the props object
• wrapper.text(): gets rendered text for assertions

javascript

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

const wrapper = mount(MyComponent, {
  props: {
    title: 'Hello'
  }
})

console.log(wrapper.props().title) // 'Hello'
console.log(wrapper.text()) // rendered text including 'Hello'

Output

'Hello'
'Hello World!'

Example

This example shows a Vue component that accepts a title prop and renders it. The test mounts the component with a title prop and checks if the rendered text includes the prop value.

javascript

/* MyComponent.vue */
<template>
  <h1>{{ title }}</h1>
</template>

<script setup>
const props = defineProps({
  title: String
})
</script>

/* MyComponent.test.js */
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

test('renders title prop correctly', () => {
  const wrapper = mount(MyComponent, {
    props: { title: 'Welcome' }
  })
  expect(wrapper.text()).toContain('Welcome')
})

Output

PASS  renders title prop correctly

Common Pitfalls

Common mistakes when testing props include:

• Not passing props when mounting, so the component uses default or undefined values.
• Trying to access props directly on the component instance instead of using wrapper.props().
• Not waiting for Vue's reactivity to update after changing props dynamically.

Always mount with props and use Vue Test Utils methods to access them.

javascript

/* Wrong way: missing props */
const wrapper = mount(MyComponent)
expect(wrapper.text()).not.toContain('Welcome') // fails if expecting prop

/* Right way: pass props */
const wrapper2 = mount(MyComponent, { props: { title: 'Welcome' } })
expect(wrapper2.text()).toContain('Welcome')

Quick Reference

Action	Code Example	Description
Mount with props	mount(Component, { props: { name: 'value' } })	Create component instance with props
Get props	wrapper.props()	Access passed props object
Check rendered text	wrapper.text()	Get component's rendered text content
Update props	await wrapper.setProps({ name: 'new' })	Change props and wait for update

Key Takeaways

Use Vue Test Utils' mount with the props option to test props in Vue components.

Access props in tests via wrapper.props() and check rendered output with wrapper.text().

Always pass required props when mounting to avoid default or undefined values.

Use await wrapper.setProps() to test dynamic prop changes and reactivity.

Avoid accessing props directly on component instances; use wrapper methods instead.