Snapshot testing in Vue - Mini Project: Build & Apply

Snapshot Testing with Vue

📖 Scenario: You are building a simple Vue component that displays a greeting message. You want to ensure that the component's output does not change unexpectedly by using snapshot testing.

🎯 Goal: Create a Vue component called GreetingMessage that shows a greeting. Then write a snapshot test to capture and verify the component's rendered output.

📋 What You'll Learn

Create a Vue component named GreetingMessage.vue that renders a <div> with the text 'Hello, Vue Learner!'

Set up a test file named GreetingMessage.spec.js to test the component

Write a snapshot test using @vue/test-utils and vitest or jest to capture the component output

Verify the snapshot test passes and matches the component's rendered HTML

💡 Why This Matters

🌍 Real World

Snapshot testing helps catch unexpected changes in UI components, ensuring consistent user experience.

💼 Career

Many frontend developer roles require writing snapshot tests to maintain UI stability during development.

1

Create the Vue component

Create a Vue component file named GreetingMessage.vue with a <template> that contains a <div> showing the exact text Hello, Vue Learner!.

Vue

  



// Your code here

Hint

Use the <template> tag to define the HTML structure. Put the greeting text inside a <div>.

2

Set up the test file

Create a test file named GreetingMessage.spec.js. Import mount from @vue/test-utils and import the GreetingMessage component from ./GreetingMessage.vue.

Vue

// Your test setup here

Hint

Use import { mount } from '@vue/test-utils' to get the mount function. Import the component with the exact path ./GreetingMessage.vue.

3

Write the snapshot test

In GreetingMessage.spec.js, write a test named 'matches snapshot' that mounts the GreetingMessage component and expects its HTML output to match the snapshot using expect(wrapper.html()).toMatchSnapshot().

Vue

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

// Write your snapshot test below

Hint

Use describe and test blocks. Mount the component and use expect(wrapper.html()).toMatchSnapshot() to create the snapshot.

4

Complete the snapshot test setup

Add the import statement import { describe, test, expect } from 'vitest' at the top of GreetingMessage.spec.js to enable the test functions.

Vue

// Add import for vitest functions here
import { mount } from '@vue/test-utils'
import GreetingMessage from './GreetingMessage.vue'

// Your test code below

Hint

Import describe, test, and expect from vitest to use the test functions.