vue-testing-best-practices

{yes-no, LATIN}

2|Updated Jun 13, 2023

Search Tags:#vitest #testing #vue #pinia #vue-test-utils #blackbox

Ready to run

npx skills add https://github.com/joaoprocopio/tooling --skill vue-testing-best-practices-joaoprocopio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-testing-best-practices
Source: https://github.com/joaoprocopio/tooling/tree/main/skills/vue-testing-best-practices
Command: npx skills add https://github.com/joaoprocopio/tooling --skill vue-testing-best-practices-joaoprocopio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides structured guidance for robust Vue testing, covering common pitfalls, testing strategies, and best practices to improve reliability and maintainability.

Core Features & Use Cases

Focus on blackbox testing, correct handling of async updates with flushPromises and nextTick, and effective use of testing utilities like Vue Test Utils and Vitest.
Covers composables, Pinia store testing, component testing patterns, and practical E2E considerations with Playwright vs Cypress.
Includes references and concrete examples to apply in real-world Vue projects.

Quick Start

Write clear, user-focused tests that exercise public APIs, handle asynchronous updates correctly, and verify emitted events and DOM output.

Frequently Asked Questions about vue-testing-best-practices

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

FAQPage Schema

What is the best way to test Vue components and Pinia stores?▼

The best way to test Vue components and Pinia stores is through blackbox testing, exercising public APIs while handling asynchronous updates with flushPromises and nextTick to verify emitted events and DOM output reliably.

How do I handle asynchronous updates when testing Vue composables?▼

Handle asynchronous updates in Vue composable tests by applying flushPromises and nextTick to ensure DOM mutations and reactive state settle before asserting emitted events or component output.

Does this Vue testing guidance apply to both unit and integration tests?▼

Yes, this Vue testing guidance applies to both unit and integration tests, providing structured patterns across components, composables, and Pinia stores to improve maintainability and reliability.

Playwright vs Cypress: which should I use for Vue E2E testing?▼

Playwright vs Cypress for Vue E2E testing involves practical considerations based on your project scope; this guidance covers their differences to help you select the appropriate tool for reliable end-to-end validation.

Why do my Vue Test Utils tests fail to detect emitted events?▼

Vue Test Utils tests fail to detect emitted events when asynchronous updates are unhandled; resolving this requires flushPromises or nextTick to settle reactive state before asserting DOM output or events.