How does this skill help with async Vue components?

It provides specific guidance on using flushPromises and async/await patterns to ensure components are fully rendered before assertions, preventing common race conditions.

What is the black-box testing approach mentioned?

It focuses on testing component behavior and output rather than internal implementation details, ensuring your tests don't break when you refactor your code.

Does it support testing Pinia stores?

Yes, it includes patterns to resolve 'injection Symbol(pinia) not found' errors and provides best practices for mocking state during component tests.

Can I use this for end-to-end testing?

Absolutely. It recommends Playwright as the primary E2E framework and provides implementation patterns for Vue-specific workflows.

Vue.js Testing Best Practices

Name: Vue.js Testing Best Practices
Author: vuejs-ai

byvuejs-ai

•

1,280

•

Security & Testing

Implements comprehensive testing strategies for Vue.js applications using Vitest, Vue Test Utils, and Playwright.

This skill provides Claude with expert-level guidance on testing Vue 3 components, composables, and full-scale applications. It covers essential topics like setting up modern test infrastructure, handling asynchronous components, mocking state management like Pinia, and implementing robust end-to-end testing with Playwright. By adhering to industry-standard patterns such as black-box testing and proper lifecycle management, it helps developers build maintainable, race-condition-free test suites that remain resilient even during major refactors.

Key Features

01Mocking and testing Pinia stores and composables

021,280 GitHub stars

03Vitest and Vue Test Utils infrastructure configuration

04Asynchronous testing and race condition resolution

05Black-box component testing for resilient refactoring

06Playwright integration for end-to-end testing

Use Cases

01Refactoring component internals while maintaining stable, non-brittle tests.

02Resolving intermittently failing tests caused by async setup or race conditions.

03Setting up a modern Vitest-based testing environment for a Vue 3 project.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vuejs-ai/skills vue-testing-best-practices

For use in Claude.ai and ChatGPT

Download Skill