skills.rest
CloudyWing
CloudyWingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vitest

Configure Vitest and Vue Test Utils for component, composable, and store unit tests.

Updated Mar 1, 2026
Search Tags:#vitest#testing#vue#mocking#unit-testing#composable#test-structure
One-click install
npx skills add https://github.com/CloudyWing/ai-dotfiles --skill vitest-cloudywing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vitest
Source: https://github.com/CloudyWing/ai-dotfiles/tree/main/skills/vitest
Command: npx skills add https://github.com/CloudyWing/ai-dotfiles --skill vitest-cloudywing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent or brittle frontend tests cause wasted time and fragile CI results; this Skill provides a clear, repeatable testing specification for projects using Vitest with Vue Test Utils to reduce flakiness and improve maintainability.

Core Features & Use Cases

  • Configuration guidance: Recommended vitest.config settings such as globals, jsdom environment, aliasing, and coverage filters to standardize test runs.
  • Test structure & naming: Enforces AAA (Arrange-Act-Assert), one behavior per test, file naming alongside source files, and include patterns for discoverability.
  • Vue and composable testing patterns: Best practices for mounting components, using data-testid selectors, testing composables (including lifecycle hooks), and mounting with global plugins like Pinia and router.
  • Mock strategies & stability: Module mocking, API and timer mocks, Pinia test helpers, and guidance to avoid implementation-detail assertions and overuse of snapshots.
  • Use case: Apply these conventions when adding unit tests for components, composables, and stores to ensure consistent CI results and easier code reviews.

Quick Start

Run the vitest skill to apply the recommended Vitest configuration, naming conventions, and mock strategies to a Vue project.

Frequently Asked Questions about vitest

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Vitest for Vue 3 component testing?▼

Configuring Vitest for Vue 3 involves setting the jsdom environment, enabling globals, and defining include patterns in your vitest.config file. This standardizes test runs and reduces CI flakiness.

What is the best way to structure Vue component unit tests?▼

The best way to structure Vue component unit tests is using the AAA pattern: Arrange, Act, Assert. Enforce one behavior per test and place test files alongside source files to improve maintainability and code review clarity.

How do I mock Pinia stores and API calls in Vitest?▼

Mock Pinia stores and API calls in Vitest using dedicated test helpers and module mocking strategies. This isolates component behavior and prevents network requests from causing brittle frontend tests.

Does this Vitest testing convention support testing composables with lifecycle hooks?▼

Yes, these Vitest conventions support testing Vue composables, including those utilizing lifecycle hooks. The guidelines provide best practices for mounting components and validating composable behavior reliably.

Why should I avoid implementation-detail assertions in Vue unit tests?▼

Avoiding implementation-detail assertions in Vue unit tests prevents brittle test failures when internal component structures change. Using stable data-testid selectors ensures tests validate behavior rather than internal code structure.

Related Skills

Explore More Software Engineering Skills→
ElderEvilElderEvil

vue-testing-best-practices

Consolidate Vue 3 testing best practices for Vitest and Vue Test Utils.

Community
Advanced
kasiopeiyakasiopeiya
1

unit-test

Execute backend and frontend unit tests with Vitest and generate detailed reports.

Community
Intermediate
mtsatryanmtsatryan
1

vue-specialist

Guide Vue 3 Composition API practices with TypeScript, Pinia, and Vitest.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

Testing with Vitest

Create unit and component tests for TypeScript and JavaScript projects with Vitest.

Community
Intermediate