skills.rest
MomoDaviluke
MomoDavilukeCOMMUNITY
Explore all skills by this author →
GitHub

vue-component-testing

Configure Vitest and mock Pinia, router, and WebSocket for Vue 3 component tests.

2|Updated Mar 3, 2026
Search Tags:#vitest#vue#vue3#component-testing#testing-mocks#pinia-mock#router-mock
One-click install
npx skills add https://github.com/MomoDaviluke/star-citizen-promotion --skill vue-component-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-component-testing
Source: https://github.com/MomoDaviluke/star-citizen-promotion/tree/main/.agents/skills/vue-component-testing
Command: npx skills add https://github.com/MomoDaviluke/star-citizen-promotion --skill vue-component-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue 3 component testing is essential for robust UI reliability but can be tedious to set up, mock, and maintain across projects.

Core Features & Use Cases

  • Vitest configuration templates for Vue 3 testing with composition API
  • Pinia store mock strategies, router mocks, and WebSocket mocks
  • Component test templates for common patterns including Suspense, lazy loading, and form interactions
  • Use cases include unit tests, component tests, and coverage gating for frontend apps.

Quick Start

Install Vitest and Vue Test Utils, then mount a simple component.

Frequently Asked Questions about vue-component-testing

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

FAQPage Schema
How do I set up Vue 3 component testing with Vitest?▼

You can mock a Pinia store in Vitest by applying provided mock strategies that intercept state interactions, enabling unit tests to validate component logic without triggering actual store mutations or API calls.

What is the best way to test Vue 3 Suspense and lazy loaded components?▼

Testing Vue 3 Suspense and lazy loaded components involves using specific component test templates that handle asynchronous boundary resolutions, ensuring your unit tests accurately capture dynamic loading states and form interactions.

Does this approach provide mock patterns for Vue Router and WebSockets?▼

Yes, this approach provides specific mock patterns for Vue Router and WebSockets, allowing you to isolate component behavior by simulating navigation events and real-time messaging without requiring active server connections.

How do I enforce test coverage gates for my Vue 3 frontend application?▼

You enforce test coverage gates by applying the specified configuration rules that define minimum coverage thresholds, preventing frontend applications from deploying unless all critical component testing paths are fully validated.

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
okgoogle13okgoogle13
1

skill-reviewer

Evaluate Claude Code skills for quality gaps and improvement opportunities.

Community
Advanced
cslsoftwarescslsoftwares

developer-vuejs-routing-state

Configure Vue Router and Pinia with guards and lazy loading.

Community
Intermediate
simoabidsimoabid
1

typescript-testing

Enforce frontend testing standards with Vitest, React Testing Library, and MSW.

Community
Advanced