Why should I use mount() instead of shallowMount()?

mount() is preferred by default because it renders child components, providing more realistic integration testing. shallowMount() should be reserved for components with heavy children that cause performance issues.

Why are data-test attributes recommended over CSS classes?

Data-test attributes act as a stable contract for tests. Unlike CSS classes or IDs, they are unlikely to change during a UI redesign, making your tests significantly less brittle.

What is the importance of flushPromises in Vue testing?

flushPromises ensures that all pending promises (like API calls or timers) are resolved before your test continues, which is crucial for testing components that fetch data on setup.

How does this skill handle Pinia state management?

The skill utilizes createTestingPinia() to automatically mock stores, allowing you to inspect which actions were called and provide initial state without manual mock boilerplate.

Vue Test Utils Expert

Name: Vue Test Utils Expert
Author: agents-inc

byagents-inc

0•

Security & Testing

Implements standardized Vue 3 component testing patterns for rendering, user interactions, and state management mocking.

The Vue Test Utils skill provides Claude with deep expertise in testing Vue 3 components using the Composition API. It enforces best practices such as full rendering with mount(), robust element selection using data-test attributes, and reliable asynchronous testing with flushPromises. This skill is essential for developers looking to write maintainable, non-flaky tests for complex UI components, Pinia stores, and Vue Router integrations while maintaining high fidelity to real-world user behavior.

Key Features

010 GitHub stars

02Event-driven interaction testing for forms and custom events

03Async testing patterns with nextTick and flushPromises

04Automated Pinia store mocking with createTestingPinia

05Context-aware mounting strategies using mount and shallowMount

06Isolated testing patterns for Vue 3 composables

Use Cases

01Writing integration tests for Vue 3 components with child dependencies

02Simulating complex user workflows and form submissions in Vitest or Jest

03Mocking global state and routing for isolated component verification

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-testing-vue-test-utils

For use in Claude.ai and ChatGPT

Download Skill