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

보안 및 테스팅

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.

주요 기능

Mocking and testing Pinia stores and composables
1,280 GitHub stars
Vitest and Vue Test Utils infrastructure configuration
Asynchronous testing and race condition resolution
Black-box component testing for resilient refactoring
Playwright integration for end-to-end testing

사용 사례

Refactoring component internals while maintaining stable, non-brittle tests.
Resolving intermittently failing tests caused by async setup or race conditions.
Setting up a modern Vitest-based testing environment for a Vue 3 project.

소개

주요 기능

Mocking and testing Pinia stores and composables
1,280 GitHub stars
Vitest and Vue Test Utils infrastructure configuration
Asynchronous testing and race condition resolution
Black-box component testing for resilient refactoring
Playwright integration for end-to-end testing

사용 사례

Refactoring component internals while maintaining stable, non-brittle tests.
Resolving intermittently failing tests caused by async setup or race conditions.
Setting up a modern Vitest-based testing environment for a Vue 3 project.