skills.rest
a35506322
a35506322COMMUNITY
Explore all skills by this author →
GitHub

vue-testing-best-practices

Resolve common Vue.js testing failures with Vitest and Vue Test Utils patterns.

1|Updated Jan 25, 2026
Search Tags:#vitest#testing#vue#playwright#pinia#vue-test-utils#async-components
One-click install
npx skills add https://github.com/a35506322/Lab.Todo --skill vue-testing-best-practices-a35506322
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-testing-best-practices
Source: https://github.com/a35506322/Lab.Todo/tree/main/.cursor/skills/vue-testing-best-practices
Command: npx skills add https://github.com/a35506322/Lab.Todo --skill vue-testing-best-practices-a35506322

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves common Vue.js testing pain points including flaky async tests, Pinia injection errors, teleport content query failures, brittle snapshot tests that break during refactoring, and incorrect async component testing.

Core Features & Use Cases

  • Vitest & Vue Test Utils Configuration: Recommended setup for Vue 3 projects, including environment configuration and test utility usage.
  • Common Testing Gotchas Resolved: Solutions for async component rendering issues, Pinia store testing setup, teleport content query limitations, and Suspense wrapper requirements for async setup components.
  • Testing Best Practices: Blackbox component testing, proper async DOM update handling with flushPromises and nextTick, avoiding snapshot-only tests, and selecting the right test runner for component vs E2E testing.
  • Use Case: A Vue 3 developer can use this Skill to fix intermittent test failures, correctly test components using Pinia stores or async setup, and implement reliable end-to-end tests with Playwright.

Quick Start

Use this skill to resolve flaky Vue 3 test failures by applying the recommended async update handling and component testing patterns to your existing test suite.

Frequently Asked Questions about vue-testing-best-practices

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

FAQPage Schema
Why are my Vue.js async tests flaky and how do I fix them?▼

Vue.js async tests are flaky due to unhandled DOM updates. Fix them by properly applying flushPromises and nextTick in your Vitest suite to ensure reliable component rendering before assertions.

How do I resolve Pinia injection errors in Vue Test Utils?▼

Resolve Pinia injection errors by correctly configuring the Pinia store testing setup in your Vue Test Utils environment, ensuring the store is properly initialized before mounting components.

What is the best way to test Vue 3 async setup components with Suspense?▼

The best way to test Vue 3 async setup components is to wrap them in a Suspense boundary, addressing async component testing gotchas and ensuring proper rendering during Vitest execution.

How do I query Teleport content in Vue Test Utils?▼

Querying Teleport content in Vue Test Utils requires specific implementation patterns to overcome teleport content query limitations, ensuring you can accurately assert rendered output outside the component DOM.

Does Playwright work with Vitest for Vue end-to-end testing?▼

Playwright works with Vitest by separating concerns: apply Vitest for component unit testing and Playwright for end-to-end test setup workflows, selecting the right test runner for your specific scope.

Should I avoid snapshot testing in Vue components?▼

Avoid snapshot-only tests in Vue components as they break during refactoring. Implement blackbox component testing practices to target behavior rather than brittle snapshot output comparisons.

Related Skills

Explore More Software Engineering Skills→
mheersmheers

vue-testing-best-practices

Outline Vue 3 testing patterns with Vitest, Vue Test Utils, and Playwright.

Community
Intermediate
traylinxtraylinx
2

webapp-testing

Automate local web application testing with Playwright scripts.

Official
Intermediate
NKDShinKuNKDShinKu

vue-testing-best-practices

Guide Vue 3 unit, component, and end-to-end testing with Vitest, Vue Test Utils, and Playwright.

Community
Advanced
kirklinkirklin
1

vue-testing-best-practices

Guide Vue 3 testing with Vitest, Vue Test Utils, and Playwright.

Community
Advanced