Vitest setup for unit testing in Vue - Mini Project: Build & Apply

Vitest setup for unit testing

📖 Scenario: You are building a small Vue 3 component and want to make sure it works correctly by writing unit tests. To do this, you will set up Vitest, a testing tool designed for Vue projects.

🎯 Goal: Set up Vitest in a Vue 3 project and write a simple unit test for a component function.

📋 What You'll Learn

Create a basic Vue 3 component with a function to test

Add a Vitest configuration file

Write a unit test using Vitest syntax

Run the test setup with the correct import and test structure

💡 Why This Matters

🌍 Real World

Unit testing helps catch bugs early by checking small parts of your app work as expected. Vitest is a fast, modern tool for testing Vue components.

💼 Career

Many frontend developer roles require writing unit tests. Knowing how to set up and use Vitest shows you can maintain code quality and reliability.

1

Create a Vue 3 component with a function

Create a Vue 3 component file named Counter.vue with a count variable initialized to 0 and a function called increment that adds 1 to count.

Vue

// Your code here

Hint

Use ref from Vue to create a reactive count variable. Define increment as a function that increases count.value by 1.

2

Add Vitest configuration file

Create a file named vitest.config.ts and add a basic Vitest configuration that imports defineConfig from vitest/config and exports a default config with test property having globals: true.

Vue

// Your code here

Hint

Use defineConfig from vitest/config to create and export the configuration object. Set globals to true inside the test property.

3

Write a unit test for the increment function

Create a test file named Counter.test.ts. Import increment and count from Counter.vue. Write a test using test and expect to check that calling increment() increases count.value by 1.

Vue

// Your code here

Hint

Use test and expect from Vitest. Call incrementTest() and check if countTest.value equals 1.

4

Complete the Vitest setup and test structure

Ensure the test file imports test and expect from vitest and that the test function is correctly defined with a descriptive name and assertion. Confirm the configuration file exports the Vitest config properly.

Vue

// Your code here to finalize test structure

Hint

Check that the test imports and config export are correct and the test has a clear name and assertion.