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.

Practice

1. What is the main purpose of Vitest when working with Vue projects?

easy

A. To run unit tests quickly and efficiently

B. To build and bundle Vue components

C. To style Vue components with CSS

D. To deploy Vue applications to servers

Solution

1. Step 1: Understand Vitest's role

   Vitest is a testing framework designed to run tests fast and provide feedback.

2. Step 2: Compare with other options

   Building, styling, and deploying are not testing tasks, so they don't match Vitest's purpose.

3. Final Answer:

   To run unit tests quickly and efficiently -> Option A

4. Quick Check:

   Vitest = fast unit testing [OK]

Hint: Vitest is for testing, not building or styling [OK]

Common Mistakes:

• Confusing Vitest with build tools
• Thinking Vitest handles styling
• Assuming Vitest deploys apps

2. Which of the following is the correct way to import Vue Test Utils in a Vitest test file?

easy

A. import mount from 'vue-test-utils';

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

C. const mount = require('@vue/test-utils');

D. import { mount } from 'vitest/vue';

Solution

1. Step 1: Check correct import syntax

   Vue Test Utils exports mount as a named export, so use curly braces and the correct package name '@vue/test-utils'.

2. Step 2: Eliminate incorrect options

   import mount from 'vue-test-utils'; uses wrong package name and default import, C uses CommonJS require which is not standard ES modules, D uses wrong package name.

3. Final Answer:

   import { mount } from '@vue/test-utils'; -> Option B

4. Quick Check:

   Correct import = import { mount } from '@vue/test-utils'; [OK]

Hint: Use named imports with curly braces from '@vue/test-utils' [OK]

Common Mistakes:

• Using default import instead of named import
• Using require instead of import
• Wrong package name in import

3. Given this Vitest test code for a Vue component:

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

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

What will happen when this test runs?

medium

A. The test passes only if the component has a button

B. The test fails because mount is not imported correctly

C. The test passes if the component's text includes 'Hello'

D. The test throws a runtime error due to missing props

Solution

1. Step 1: Analyze the test logic

   The test mounts the HelloWorld component and checks if its text includes 'Hello'.

2. Step 2: Check for errors or conditions

   Mount is imported correctly, no props are required, and the test expects 'Hello' in text.

3. Final Answer:

   The test passes if the component's text includes 'Hello' -> Option C

4. Quick Check:

   Text includes 'Hello' = test passes [OK]

Hint: Check what the expect statement verifies in the test [OK]

Common Mistakes:

• Assuming mount import is wrong
• Thinking props are mandatory here
• Confusing test condition with button presence

4. You wrote this Vitest test but it fails with "ReferenceError: describe is not defined":

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

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

What is the most likely fix?

medium

A. Remove the mount import

B. Change describe to test and it to check

C. Wrap the test code inside a Vue component

D. Add import { describe, it, expect } from 'vitest'; at the top

Solution

1. Step 1: Identify missing imports

   The error says 'describe' is not defined, meaning it is not imported from Vitest.

2. Step 2: Add necessary imports

   Importing describe, it, and expect from 'vitest' fixes the error.

3. Final Answer:

   Add import { describe, it, expect } from 'vitest'; at the top -> Option D

4. Quick Check:

   Missing test functions import = add import [OK]

Hint: Always import test functions from 'vitest' [OK]

Common Mistakes:

• Assuming describe is globally available
• Changing test function names incorrectly
• Removing needed imports

5. You want to test a Vue component that uses a global plugin. Which Vitest setup step is necessary to ensure the plugin works during testing?

hard

A. Configure the test to mount the component with the plugin registered globally

B. Mock the plugin by replacing it with an empty object

C. Import the plugin inside the test file but do not register it

D. Run the test without mounting the component

Solution

1. Step 1: Understand plugin usage in tests

   Global plugins must be registered in the test mount options to behave like in the app.

2. Step 2: Choose correct setup

   Mounting with the plugin registered globally ensures the component can use it during the test.

3. Final Answer:

   Configure the test to mount the component with the plugin registered globally -> Option A

4. Quick Check:

   Global plugin = register in mount options [OK]

Hint: Register global plugins in mount options for tests [OK]

Common Mistakes:

• Mocking plugin without registering it
• Importing plugin but not registering
• Testing without mounting component