Vue.js testing best practices, patterns, and common gotchas.
Testing
Reference
Summary This is a comprehensive Vue.js testing best practices skill that provides structured guidance on testing Vue 3 applications. It covers unit testing with Vitest and Vue Test Utils, component testing patterns, store testing with Pinia, handling async components and composables, and E2E testing with Playwright. The skill includes 11 reference documents addressing specific testing challenges like Suspense, Teleport, snapshot tests, and async race conditions.
Static Analysis Findings 1 finding Patterns detected by deterministic static analysis before AI scoring. Hover over any finding code for detailed information and remediation guidance.
SEC-020 Direct .env File Access 5x in 2 files
Direct .env file access
reference/testing-vitest-recommended-for-vue.md .env
reference/testing-e2e-playwright-recommended.md .env4x
Detected Capabilities file read code examples configuration guidance best practices documentation test pattern examples error handling patterns
Trigger Keywords Phrases that MCP clients use to match this skill to user intent.
vue testing setup vitest configuration component testing pinia store testing e2e testing playwright async component testing test race conditions vue test utils
Risk Signals INFO
Direct .env file access mentioned in testing configuration
reference/testing-vitest-recommended-for-vue.md
INFO
Direct .env file access mentioned in E2E environment setup
reference/testing-e2e-playwright-recommended.md
INFO
Multiple .env references in environment configuration examples
reference/testing-e2e-playwright-recommended.md
Referenced Domains External domains referenced in skill content, detected by static analysis.
github.com kentcdodds.com localhost pinia.vuejs.org playwright.dev test-utils.vuejs.org testing-library.com vitest.dev vuejs.org www.npmjs.com
Use Cases Unit test Vue 3 components with Vitest and Vue Test Utils Set up Pinia store testing with createTestingPinia Test async components and composables requiring Suspense Debug race conditions and flaky tests with flushPromises Configure E2E testing with Playwright for cross-browser validation Test components with lifecycle hooks and injected dependencies Implement blackbox testing to avoid brittle tests tied to implementation Handle testing patterns for Teleport, modal, and teleported content Avoid snapshot test anti-patterns and improve test quality Choose between Node and browser test runners based on testing needs Quality Notes Excellent reference documentation structure with clear problem/solution pairs Each reference file is well-scoped to a specific testing challenge with high/medium impact ratings Task checklists in each file provide actionable guidance for developers Good use of correct/incorrect code examples showing anti-patterns and best practices Comprehensive coverage of Vue 3 testing ecosystem (Vitest, Vue Test Utils, Pinia, Playwright) Helper functions and utility patterns (withSetup, mountSuspense) are well-documented and reusable Clear guardrails around testing anti-patterns like snapshot-only tests and implementation-detail testing Good calibration of when to use different test runners (Node vs browser) with clear decision criteria .env references are in context of test configuration only, not credential exposure in code All 11 referenced files are present and well-integrated with SKILL.md index Model: claude-haiku-4-5-20251001 Analyzed: Jul 11, 2026
Reviews Add this skill to your library to leave a review.
No reviews yet
Be the first to share your experience.