Vitest setup for unit testing in Vue - Performance & Optimization

Performance: Vitest setup for unit testing

MEDIUM IMPACT

This setup affects initial test run speed and incremental test execution time during development.

Setting up Vitest for Vue unit tests

Vue

/// vitest.config.ts
import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  test: {
    include: ['tests/unit/**/*.spec.ts'],
    exclude: ['node_modules', 'dist'],
    environment: 'jsdom',
    watch: false
  }
});

Configuring Vitest to include only relevant test files and exclude heavy folders reduces file watching and speeds up test runs.

📈 Performance GainReduces test startup time by 50% and lowers CPU usage during watch mode

Setting up Vitest for Vue unit tests

Vue

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

// No config file, tests run with default settings
// All files watched including node_modules

// Test example
it('renders component', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.text()).toContain('Hello');
});

Running Vitest without configuration causes it to watch unnecessary files and run slower, increasing CPU usage and test startup time.

📉 Performance CostBlocks test startup for 500ms+ on medium projects; watches hundreds of files unnecessarily

Performance Comparison

Pattern	File Watching	Test Startup Time	CPU Usage	Verdict
Default Vitest without config	Watches all files including node_modules	Slow (500ms+)	High CPU usage	[X] Bad
Vitest with focused config and excludes	Watches only test files and source	Fast (200ms)	Low CPU usage	[OK] Good

Rendering Pipeline

Vitest setup affects the test runner's file watching and module loading stages, impacting how quickly tests start and rerun.

→Module Resolution

→File Watching

→Test Execution

⚠️ BottleneckFile Watching and Module Resolution when unfiltered

Optimization Tips

1Always exclude heavy folders like node_modules from Vitest file watching.

2Specify test file patterns to limit the scope of tests and speed up runs.

3Use a Vitest config file to control environment and watch behavior for better performance.

Performance Quiz - 3 Questions

What is a key performance benefit of configuring Vitest to exclude node_modules from watching?

A Allows tests to run in production mode

B Reduces CPU usage and speeds up test startup

C Increases test coverage automatically

D Enables parallel test execution

DevTools: Performance

How to check: Run Vitest with --watch and open the Performance tab in browser DevTools or Node.js profiler; record startup and rerun times.

What to look for: Look for long file scanning or module loading phases indicating inefficient file watching or config

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