skills.rest
shengmingzhishu
shengmingzhishuCOMMUNITY
Explore all skills by this author →
GitHub

vue-testing

Test Vue 3 components, composables, and stores with Vitest and Vue Test Utils.

Updated Aug 22, 2026
Search Tags:#vitest#testing#e2e#component testing#composables#vue 3#vue test utils
One-click install
npx skills add https://github.com/shengmingzhishu/LeeCommonSkills --skill vue-testing-shengmingzhishu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-testing
Source: https://github.com/shengmingzhishu/LeeCommonSkills/tree/main/.rules-skills/vue-stack/.trae/skills/vue-testing
Command: npx skills add https://github.com/shengmingzhishu/LeeCommonSkills --skill vue-testing-shengmingzhishu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Vue 3 projects often lack a consistent testing strategy, leading to untested component interactions, fragile composable state logic, and regressions in critical user paths. This Skill provides a risk-based testing approach that matches verification depth to change impact. ## Core Features & Use Cases - Risk-Based Test Selection: Choose minimal sufficient verification by level—L0 runs affected tests or records manual verification, L1 covers component interactions, composable state, and API success/failure paths, L2 adds contract integration and key E2E flows. - Proper Mocking Boundaries: Mock only external boundaries (HTTP, routing, time) while keeping business logic under test real, avoiding false confidence from over-mocked tests. - Use Case: After modifying a Vue 3 composable that manages form state, apply L1 verification to test the composable's state transitions and the component's interaction with it, mocking only the HTTP layer. ## Quick Start Write Vitest tests for my Vue 3 component and its composable, mocking only the HTTP and router boundaries.

Frequently Asked Questions about vue-testing

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

FAQPage Schema
How do I test Vue 3 components with Vitest?▼

Use Vitest with Vue Test Utils to mount components and assert on rendered output and interactions. Mock only external boundaries like HTTP requests and routing, keeping the component's own business logic real so tests reflect actual behavior.

What should I mock when testing Vue components?▼

Mock only external boundaries: HTTP calls, the router, and time-dependent functions. Do not mock the business logic under test, since over-mocking produces tests that pass without verifying real behavior.

How do I test Vue composables with Vitest?▼

Test composables by invoking them directly in Vitest and asserting on their reactive state transitions. Cover both success and failure paths for any API interactions, mocking only the HTTP layer the composable depends on.

When should I use E2E tests versus unit tests in Vue?▼

Use a risk-based approach: L0 changes need only affected tests or recorded manual verification, L1 changes need component, composable, and API path coverage, and L2 changes add contract integration and key E2E flows for critical user paths.

Does Vue Test Utils work with Vitest for Vue 3?▼

Yes, Vue Test Utils is the official mounting library for Vue 3 and integrates directly with Vitest as the test runner. Together they cover component rendering, event simulation, and store interaction testing.

Related Skills

Explore More Software Engineering Skills→
verivendverivend

vitest-testing

Generate Vitest unit test templates for Vue 3 TypeScript Vite projects.

Official
Intermediate
saitarrunsaitarrun
4

code-quality

Configure linting, test coverage thresholds, and CI quality gates.

Community
Advanced
tony30552001tony30552001

plan-eng-review

Review architecture, data flow, diagrams, edge cases, test coverage, and performance.

Community
Advanced
AbsolutelySkilledAbsolutelySkilled
207

cypress-testing

Automate Cypress end-to-end and component testing workflows for AI agents.

Official
Advanced