Vitest setup for unit testing in Vue - Step-by-Step Execution

Concept Flow - Vitest setup for unit testing

Install Vitest and dependencies

↓

Create vitest.config.ts file

↓

Write test files with .test.ts or .spec.ts

↓

Run tests using vitest command

↓

View test results in terminal

↓

Fix code or tests based on results

↓

Repeat testing cycle

This flow shows the steps to set up Vitest for Vue unit testing, from installation to running and fixing tests.

Execution Sample

Vue

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from '../src/components/HelloWorld.vue'

describe('HelloWorld', () => {
  it('renders properly', () => {
    const wrapper = mount(HelloWorld)
    expect(wrapper.text()).toContain('Hello World')
  })
})

This code defines a simple unit test for a Vue component using Vitest and Vue Test Utils.

Execution Table

Step	Action	Evaluation	Result
1	Import testing functions and component	Imports succeed	Ready to write tests
2	Define test suite with describe	Suite named 'HelloWorld'	Grouping tests
3	Define test case with it	Test named 'renders properly'	Test case ready
4	Mount HelloWorld component	Component instance created	Wrapper holds component
5	Check if wrapper text contains 'Hello World'	Text found	Test passes
6	Test run completes	All tests passed	Success message shown

💡 All tests passed, Vitest run ends successfully

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
wrapper	undefined	Component instance	Component instance	Component instance
test result	undefined	undefined	pass	pass

Key Moments - 3 Insights

Why do we import 'describe', 'it', and 'expect' from Vitest?

These functions define test suites, individual tests, and assertions. Without importing them, tests won't run. See execution_table steps 1 and 2.

What does 'mount' do in the test?

'mount' creates a live instance of the Vue component so we can inspect it. This happens at step 4 in the execution_table.

Why must test files be named with .test.ts or .spec.ts?

Vitest looks for these file patterns to find tests automatically. Without correct naming, tests won't run.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'wrapper' after step 4?

A Component instance

B undefined

C Test result

D Text content

💡 Hint

Check variable_tracker column 'After Step 4' for 'wrapper'

At which step does the test check the component's text content?

A Step 3

B Step 5

C Step 4

D Step 6

💡 Hint

Look at execution_table 'Action' column for text check

If the component text did not contain 'Hello World', what would change in the execution_table?

A Step 6 would show success

B Step 4 would fail mounting

C Step 5 result would be 'Test fails'

D Step 2 would not run

💡 Hint

Refer to execution_table step 5 'Result' column

Concept Snapshot

Vitest setup for Vue unit testing:
1. Install vitest and vue-test-utils.
2. Create vitest.config.ts for config.
3. Write tests in .test.ts files using describe/it.
4. Use mount() to render components.
5. Use expect() for assertions.
6. Run tests with 'vitest' command.

Full Transcript

To set up Vitest for unit testing Vue components, first install Vitest and Vue Test Utils. Then create a configuration file named vitest.config.ts to customize settings. Write your test files with .test.ts or .spec.ts extensions. Inside tests, import describe, it, and expect from Vitest and mount from Vue Test Utils. Use describe to group tests and it to define individual tests. Mount your Vue component to create an instance, then use expect to check if the component behaves as expected. Run tests using the vitest command in your terminal. If tests pass, you see success messages; if not, fix your code or tests and rerun. This cycle helps ensure your Vue components work correctly.