Why testing Vue apps matters

Introduction

Testing Vue apps helps catch mistakes early and makes sure your app works as expected. It gives you confidence that changes won't break things.

When you want to check if a button click updates the page correctly

Before releasing a new feature to make sure it behaves right

When fixing bugs to confirm the problem is solved

To keep your app stable as it grows bigger

When working with a team to avoid accidental errors

Syntax

Vue

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

test('renders message', () => {
  const wrapper = mount(MyComponent)
  expect(wrapper.text()).toContain('Hello')
})

Use mount to create a test version of your Vue component.

Use assertions like expect to check if the output matches what you want.

Examples

This test checks if clicking the button changes the text shown.

Vue

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

test('button click changes text', async () => {
  const wrapper = mount(Button)
  await wrapper.find('button').trigger('click')
  expect(wrapper.text()).toContain('Clicked')
})

This test ensures typing in the input updates the component's data.

Vue

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

test('input updates model', async () => {
  const wrapper = mount(Input)
  const input = wrapper.find('input')
  await input.setValue('Vue')
  expect(wrapper.vm.model).toBe('Vue')
})

Sample Program

This test mounts the Message component with a prop and checks if it shows the right text.

Vue

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

test('displays correct message', () => {
  const wrapper = mount(Message, {
    props: { text: 'Hello Vue' }
  })
  expect(wrapper.text()).toBe('Hello Vue')
})

Important Notes

Write small tests that check one thing at a time.

Run tests often to catch problems early.

Use descriptive test names to understand what each test does.

Summary

Testing helps find bugs before users do.

It makes your Vue app more reliable and easier to maintain.

Tests save time by preventing future errors.