Why testing Vue apps matters - See It in Action

Why testing Vue apps matters

📖 Scenario: You are building a simple Vue app that shows a list of tasks. You want to make sure your app works correctly every time you add or change tasks.

🎯 Goal: Learn why testing Vue apps is important by creating a small app and adding a test that checks if tasks display correctly.

📋 What You'll Learn

Create a Vue component with a list of tasks

Add a reactive variable to hold tasks

Write a test that checks if the tasks render properly

Understand how testing helps catch errors early

💡 Why This Matters

🌍 Real World

Testing Vue apps helps developers catch bugs early before users see them. It makes apps more reliable and easier to maintain.

💼 Career

Many companies use Vue and expect developers to write tests to ensure app quality and reduce errors in production.

1

Set up the Vue component with tasks

Create a Vue component named TaskList.vue using the <script setup> syntax. Inside it, create a reactive variable called tasks with the array ["Buy milk", "Walk dog", "Read book"].

Vue

// Create a reactive variable called tasks with the array ["Buy milk", "Walk dog", "Read book"]



  

Hint

Use ref from Vue to create a reactive array called tasks. Then use v-for in the template to loop over tasks.

2

Add a test setup variable

In a new test file named TaskList.spec.js, import mount from @vue/test-utils and import the TaskList.vue component. Create a variable called wrapper that mounts TaskList.

Vue

import { ref } from 'vue'
const tasks = ref(["Buy milk", "Walk dog", "Read book"])



  
    {{ task }}
  


// In TaskList.spec.js
import { mount } from '@vue/test-utils'
import TaskList from './TaskList.vue'

// Create a variable wrapper that mounts TaskList

Hint

Use mount(TaskList) to create a wrapper that lets you test the component.

3

Write a test to check task rendering

In TaskList.spec.js, write a test named 'renders all tasks' that checks if the wrapper contains exactly 3 <li> elements.

Vue

import { ref } from 'vue'
const tasks = ref(["Buy milk", "Walk dog", "Read book"])



  
    {{ task }}
  


// In TaskList.spec.js
import { mount } from '@vue/test-utils'
import TaskList from './TaskList.vue'

const wrapper = mount(TaskList)

test('renders all tasks', () => {
  // Check that wrapper has 3 li elements
})

Hint

Use test() to define a test and expect(wrapper.findAll('li')).toHaveLength(3) to check the number of list items.

4

Explain why testing Vue apps matters

Add a comment at the top of TaskList.spec.js explaining in simple words why testing Vue apps helps catch errors early and keeps the app working well.

Vue

// Add a comment explaining why testing Vue apps matters

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

const wrapper = mount(TaskList)

test('renders all tasks', () => {
  expect(wrapper.findAll('li')).toHaveLength(3)
})

Hint

Write a simple comment like: // Testing Vue apps helps catch errors early and makes sure the app works well when we change code.