skills.rest
bramanda48
bramanda48COMMUNITY
Explore all skills by this author →
WebsiteGitHub

vue-testing-best-practices

Guides Vue.js testing with Vitest, Vue Test Utils, Pinia, and Playwright patterns.

Updated Sep 17, 2026
Search Tags:#vitest#testing#vue#playwright#pinia#component-testing#vue-test-utils
One-click install
npx skills add https://github.com/bramanda48/skills --skill vue-testing-best-practices-bramanda48
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-testing-best-practices
Source: https://github.com/bramanda48/skills/tree/main/skills/vue-testing-best-practices
Command: npx skills add https://github.com/bramanda48/skills --skill vue-testing-best-practices-bramanda48

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Vue.js tests often fail intermittently due to async race conditions, missing Pinia injection, unhandled Suspense wrappers, or Teleport rendering outside the component tree, and this Skill provides proven patterns to diagnose and fix these issues. ## Core Features & Use Cases - Async Testing Patterns: Handle async updates correctly with nextTick, flushPromises, and Suspense wrappers for components with async setup or defineAsyncComponent. - Store and Composable Testing: Configure Pinia with createTestingPinia and setActivePinia, and test composables using lifecycle hooks or inject via a host component wrapper. - Testing Strategy Guidance: Apply blackbox component testing, avoid snapshot-only tests, choose between node and browser runners, and set up Playwright for E2E testing. - Use Case: When a test fails with "injection Symbol(pinia) not found" or a teleported modal cannot be found by wrapper queries, consult the matching reference for the exact fix with code examples. ## Quick Start Ask how to fix a failing Vue component test, such as testing an async component or a component using a Pinia store.

Frequently Asked Questions about vue-testing-best-practices

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

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

Install vitest, @vue/test-utils, and happy-dom, then configure the test environment in vite.config.js with globals enabled. Mount components with @vue/test-utils and assert on rendered output and emitted events.

How to fix injection Symbol(pinia) not found in tests?▼

This error occurs when Pinia is not configured in the test environment. Use createTestingPinia from @pinia/testing in the mount global plugins for component tests, or call setActivePinia(createPinia()) in beforeEach for store unit tests.

Why do Vue tests fail intermittently with race conditions?▼

Vue updates the DOM asynchronously, so assertions may run before updates complete. Await trigger() and setValue() calls, use nextTick for reactive state changes, and use flushPromises for external async operations like API calls.

Playwright vs Cypress for Vue E2E testing?▼

Playwright offers full cross-browser support including WebKit, built-in parallelization, and is fully open source. Cypress has limited WebKit support and requires paid subscriptions for some features, so Playwright is recommended for new setups.

How do I test components using Teleport in Vue?▼

Teleported content renders outside the component tree, so wrapper.find() cannot locate it. Stub Teleport in unit tests to render content inline, or mount with attachTo document.body and query the real DOM for integration tests.

When should I use Vitest Browser Mode instead of jsdom?▼

Use Vitest Browser Mode when tests need real computed CSS styles, native events like drag and drop, focus behavior, or cookies. Node-based runners with jsdom or happy-dom are faster and sufficient for logic-focused component tests.

Related Skills

Explore More Software Engineering Skills→
CloudyWingCloudyWing

vitest

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

Community
Intermediate
WhaleylawWhaleylaw

ci-cd-testing-specialist

Automate GitHub Actions CI/CD test execution and PR reporting for Node web apps.

Community
Advanced
monam2monam2

Lint & TypeCheck

Run ESLint and TypeScript checks to identify code quality issues.

Community
Intermediate
JosephAnsonJosephAnson
1

testing

Guide Nuxt/Vue tests with Testing Library and Vitest.

Community
Advanced