What is the benefit of using data-test attributes for selectors?

Data-test attributes act as a stable contract between the code and the test. Unlike CSS classes or IDs, they are less likely to change during styling refactors, making your tests significantly more resilient.

Why does the skill require awaiting trigger() and setValue()?

Vue updates the DOM asynchronously. Awaiting these methods ensures that the Promise resolves only after Vue has finished the DOM update cycle, preventing flaky tests and false negatives.

When should I use mount versus shallowMount?

Use mount() by default for realistic integration testing that includes child components. Use shallowMount() only when dealing with performance issues or when strict isolation from complex children is required.

How should I handle Pinia stores in my component tests?

Use createTestingPinia() from @pinia/testing. This utility automatically mocks store actions and allows you to easily set initial state without manual mock boilerplate.

Vue Component Testing Patterns

Name: Vue Component Testing Patterns
Author: agents-inc

byagents-inc

0•

セキュリティとテスト

Implements standardized Vue 3 component testing patterns using Vue Test Utils for reliable interaction and state verification.

This skill provides Claude with specialized knowledge for testing Vue 3 components using the Composition API and Vue Test Utils. It enforces industry best practices such as prioritizing full component rendering with mount(), utilizing data-test attributes for resilient selectors, and correctly handling asynchronous updates with flushPromises. Whether mocking Pinia stores, stubbing child components, or verifying complex user interactions, this skill ensures your test suite is robust, maintainable, and closely mimics real-world user behavior.

主な機能

010 GitHub stars

02Component communication testing including props, events, and stubs

03Resilient element querying using dedicated data-test attributes

04Seamless Pinia store mocking via createTestingPinia

05Asynchronous testing patterns with flushPromises and nextTick

06Standardized mounting strategies for full and shallow rendering

ユースケース

01Testing complex Vue 3 components using the Composition API

02Mocking global state management and routing in isolated component tests

03Verifying asynchronous user flows and API integration within the UI

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