Testing user interactions in Vue - Mini Project: Build & Apply

Testing User Interactions in Vue

📖 Scenario: You are building a simple Vue component that lets users click a button to increase a counter. You want to test that the button click updates the counter correctly.

🎯 Goal: Create a Vue component with a button and a counter display. Then write a test that simulates clicking the button and checks the counter updates.

📋 What You'll Learn

Create a Vue component with a count state starting at 0

Add a button that increments count when clicked

Write a test that mounts the component

Simulate a button click in the test and verify the counter increments

💡 Why This Matters

🌍 Real World

Testing user interactions like button clicks is essential for building reliable web apps that respond correctly to users.

💼 Career

Front-end developers often write tests to verify UI behavior. Knowing how to simulate clicks and check updates is a key skill.

1

Create the Vue component with initial count

Create a Vue component named CounterButton using <script setup>. Inside, create a ref called count and set it to 0. Add a <template> with a <button> that displays the text Clicked {{ count }} times.

Vue

// Create a ref called count and set it to 0
// Your code here



  
  

Hint

Use ref(0) to create a reactive count variable. Display it inside the button text.

2

Add click event to increment count

Add a @click event handler to the <button> that increases count.value by 1 when clicked.

Vue

import { ref } from 'vue'
const count = ref(0)



  
  Clicked {{ count }} times

Hint

Use @click="count.value++" on the button to increase count on each click.

3

Write a test to mount the component

Create a test file that imports mount from @vue/test-utils and imports the CounterButton component. Use mount(CounterButton) to create a wrapper for testing.

Vue

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

// Mount the CounterButton component
const wrapper = mount(CounterButton)
// Your code here

Hint

Use mount to create a test wrapper for the component.

4

Simulate button click and check counter update

Use wrapper.find('button').trigger('click') to simulate a click on the button. Then check that wrapper.text() contains the text 'Clicked 1 times' to confirm the counter incremented.

Vue

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

const wrapper = mount(CounterButton)

// Simulate button click
// Check that wrapper.text() contains 'Clicked 1 times'
// Your code here

Hint

Use trigger('click') on the button and check the text updates to 'Clicked 1 times'.