Why does this skill recommend mount() over shallowMount()?

Using mount() by default provides higher fidelity by rendering child components, ensuring your tests more accurately reflect how the software is used in production compared to the isolation of shallowMount().

When should I use flushPromises() in my Vue tests?

You should use flushPromises() after any asynchronous operation that Vue's reactivity system doesn't track, such as external API calls or timers, to ensure all pending promises resolve before making assertions.

How do I handle Pinia stores in component tests?

This skill utilizes the createTestingPinia() utility, which automatically mocks actions and allows you to provide initial state, avoiding the complexity of manual store mocking.

Why are data-test attributes preferred over CSS classes?

CSS classes and IDs are prone to change during styling updates. Using data-test attributes creates a dedicated testing contract that remains stable even when the UI design is refactored.

Vue Test Utils Testing Patterns

Name: Vue Test Utils Testing Patterns
Author: agents-inc

byagents-inc

0•

Security & Testing

Implements robust Vue 3 component testing patterns using Vue Test Utils and Vitest for reliable UI verification.

This skill provides specialized guidance for testing Vue 3 components with the Composition API, prioritizing user behavior over implementation details. It enforces industry best practices such as full component rendering with mount(), stable selection via data-test attributes, and precise handling of asynchronous DOM updates. By integrating mocking patterns for Pinia and Vue Router, it enables developers to build high-confidence test suites that are resilient to refactoring and aligned with modern Vue ecosystem standards.

Key Features

01Integrated Pinia store mocking via createTestingPinia and Vue Router stubs

020 GitHub stars

03Async testing utilities including flushPromises and nextTick coordination

04Enforced selector conventions using data-test attributes for stable testing contracts

05Event simulation patterns for user interactions like trigger() and setValue()

06Standardized mounting strategies prioritizing mount() over shallowMount()

Use Cases

01Unit testing Vue 3 components that utilize the Composition API and reactive state

02Testing complex form interactions and validation logic with asynchronous API calls

03Mocking global state management and routing in isolated component environments

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

Key Features

01Integrated Pinia store mocking via createTestingPinia and Vue Router stubs

020 GitHub stars

03Async testing utilities including flushPromises and nextTick coordination

04Enforced selector conventions using data-test attributes for stable testing contracts

05Event simulation patterns for user interactions like trigger() and setValue()

06Standardized mounting strategies prioritizing mount() over shallowMount()

Use Cases

01Unit testing Vue 3 components that utilize the Composition API and reactive state

02Testing complex form interactions and validation logic with asynchronous API calls

03Mocking global state management and routing in isolated component environments

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