When is flushPromises() required in Vue tests?

Use flushPromises() when your component performs actions that Vue's reactivity system doesn't track, such as API calls (Promises) or timers, to ensure all pending async operations resolve.

Why use data-test attributes for selectors?

CSS classes and IDs are prone to change during styling updates. data-test attributes act as a stable contract for testing that won't break when the UI design changes.

How does this skill handle Pinia state mocking?

It implements createTestingPinia from @pinia/testing, which automatically creates mocks for actions and allows for easy initial state configuration without manual boilerplate.

Why is it necessary to await trigger() or setValue()?

Vue updates the DOM asynchronously. Awaiting these methods ensures that Vue's reactivity system has finished updating the DOM before your assertions run, preventing flaky tests.

Why should I prefer mount() over shallowMount()?

mount() renders the full component tree including children, providing a more realistic test environment. shallowMount() stubs children and can miss bugs in component communication or slot rendering.

Vue Component Testing with Vue Test Utils

Name: Vue Component Testing with Vue Test Utils
Author: agents-inc

byagents-inc

•

セキュリティとテスト

Provides standardized patterns for testing Vue 3 components using Vue Test Utils, covering mounting, user interactions, and state mocking.

This skill equips Claude with standardized patterns and best practices for testing Vue 3 components using @vue/test-utils. It focuses on high-fidelity testing by prioritizing full component mounting, asynchronous event handling, and user-centric assertions. Developers can leverage this skill to implement robust test suites that include Pinia store mocking, Vue Router integration, and isolated testing for composables, ensuring that component behavior is verified through accessible selectors like data-test attributes rather than brittle implementation details.

主な機能

01Isolated testing methodologies for Vue 3 Composition API composables

02Integrated Pinia store mocking using createTestingPinia

03Full and shallow component mounting patterns for realistic integration

04DOM querying using industry-standard data-test attribute patterns

051 GitHub stars

06Asynchronous event and input handling with proper lifecycle awaiting

ユースケース

01Standardizing test suites across a team to use best-practice async handling and selectors

02Verifying complex user interactions in Vue 3 Composition API components

03Integration testing components that rely on Pinia state management or Vue Router

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

主な機能

01Isolated testing methodologies for Vue 3 Composition API composables

02Integrated Pinia store mocking using createTestingPinia

03Full and shallow component mounting patterns for realistic integration

04DOM querying using industry-standard data-test attribute patterns

051 GitHub stars

06Asynchronous event and input handling with proper lifecycle awaiting

ユースケース

01Standardizing test suites across a team to use best-practice async handling and selectors

02Verifying complex user interactions in Vue 3 Composition API components

03Integration testing components that rely on Pinia state management or Vue Router

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