vue-testing-best-practices

About vue-testing-best-practices

The vue-testing-best-practices skill provides comprehensive guidance for testing Vue.js 3 applications. It addresses common testing challenges that developers encounter when working with modern Vue projects, from unit testing individual components to end-to-end testing of complete user flows. The skill focuses on practical solutions to real-world testing problems, helping developers avoid common pitfalls and implement robust test suites.

This skill covers the full testing spectrum for Vue applications, including test infrastructure setup with Vitest, component testing strategies using Vue Test Utils, handling asynchronous operations, testing composables and Pinia stores, and implementing E2E tests with Playwright. It emphasizes best practices like black-box testing approaches to make tests resilient to refactoring, proper handling of async components and race conditions, and choosing appropriate testing strategies for different scenarios. The skill also addresses framework-specific challenges such as testing components with Suspense, Teleport, and async setup.

Target users include Vue.js developers building production applications who need reliable test coverage, teams transitioning from Vue 2 to Vue 3 testing patterns, and developers struggling with flaky or brittle tests. Whether setting up testing infrastructure for a new project, improving existing test quality, or debugging specific testing issues like injection errors or intermittent failures, this skill provides actionable guidance and proven patterns for creating maintainable test suites.

FAQ

What testing frameworks does this skill recommend for Vue 3?

This skill recommends Vitest as the primary testing framework for Vue 3 projects due to its excellent Vue integration and performance. For end-to-end testing, Playwright is the recommended choice. Vue Test Utils is used for component mounting and interaction in unit tests.

How does this skill help with flaky or intermittent test failures?

The skill provides specific patterns for handling async operations properly using await and flushPromises to eliminate race conditions. It also covers testing browser-specific behavior, handling async components with Suspense, and implementing black-box testing approaches that are resilient to internal implementation changes.

Can this skill help test Pinia stores and composables?

Yes, the skill includes dedicated guidance for testing Pinia stores, including proper setup to avoid injection errors. It also covers testing composables that use lifecycle hooks or inject, which require special handling through helper wrapper components.

Does this skill cover testing components with Teleport or async setup?

Yes, the skill addresses testing challenges specific to Vue 3 features including Teleport (which affects query strategies), components with async setup (requiring Suspense), and defineAsyncComponent. It provides practical solutions for each of these scenarios.

What is the skill's stance on snapshot testing?

The skill advises against relying solely on snapshot tests, as they can give false confidence by passing even when functionality is broken. It recommends using behavioral tests that verify actual component behavior rather than just structure.

All Files