Component testing with Vue Test Utils

Introduction

Component testing helps you check if your Vue parts work right. It finds mistakes early so your app stays strong.

You want to check if a button click changes text as expected.

You need to verify a form shows error messages when input is wrong.

You want to make sure a list displays the correct number of items.

You want to test if a component emits the right event when interacted with.

Syntax

Vue

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

test('description of test', () => {
  const wrapper = mount(ComponentName)
  // interact with wrapper or check output
  expect(wrapper.text()).toContain('expected text')
})

mount() creates a full instance of the component for testing.

Use expect() to check if the output or behavior matches what you want.

Examples

This test checks if the HelloWorld component shows the word 'Hello'.

Vue

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

test('shows greeting message', () => {
  const wrapper = mount(HelloWorld)
  expect(wrapper.text()).toContain('Hello')
})

This test clicks a button and checks if the count increases to 1.

Vue

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

test('increments count on click', async () => {
  const wrapper = mount(ButtonCounter)
  await wrapper.find('button').trigger('click')
  expect(wrapper.text()).toContain('Count: 1')
})

This test checks if clicking a button emits a 'custom-event'.

Vue

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

test('emits custom event on action', async () => {
  const wrapper = mount(EmitEvent)
  await wrapper.find('button').trigger('click')
  expect(wrapper.emitted()).toHaveProperty('custom-event')
})

Sample Program

This example tests a simple counter button. The first test checks it starts at zero. The second test clicks the button and checks the count increases to 1.

Vue

import { mount } from '@vue/test-utils'
import { describe, test, expect } from 'vitest'

// Simple Vue component
const Counter = {
  template: `<button @click=\"count++\">Count: {{ count }}</button>`,
  data() {
    return { count: 0 }
  }
}

describe('Counter component', () => {
  test('starts at zero', () => {
    const wrapper = mount(Counter)
    expect(wrapper.text()).toBe('Count: 0')
  })

  test('increments count when clicked', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toBe('Count: 1')
  })
})

Important Notes

Use await with trigger to wait for Vue to update after events.

Mounting a component creates a real instance, so tests are close to how users see it.

Check emitted events with wrapper.emitted() to test communication between components.

Summary

Component testing checks if Vue parts behave as expected.

Use Vue Test Utils mount() to create a test instance.

Simulate user actions and check output or events to confirm correct behavior.