Why should I use data-test attributes for selectors?

CSS classes and IDs are prone to change during styling updates, which breaks tests. data-test attributes provide a stable, dedicated contract for testing that doesn't affect production styling.

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

mount() renders the full component tree, ensuring your tests more closely resemble real-world usage and catch integration issues between parents and children that shallowMount() might miss.

Does this skill support Pinia store testing?

Yes, it implements patterns using createTestingPinia(), which allows you to automatically mock store actions while maintaining reactive state during component tests.

How do I handle asynchronous API calls in my Vue tests?

You should use flushPromises() after any action that triggers an external async operation to ensure all pending promises resolve before you run your assertions.

Vue Test Utils Patterns

Name: Vue Test Utils Patterns
Author: agents-inc

byagents-inc

0•

Security & Testing

Implements standardized Vue 3 component testing patterns using Vue Test Utils, Pinia mocking, and async handling.

This skill provides Claude with a comprehensive framework for writing robust Vue 3 component tests. It enforces best practices such as using mount() for high-fidelity rendering, employing data-test attributes for resilient selectors, and correctly handling asynchronous updates with flushPromises(). By integrating with Pinia and Vue Router, it enables developers to simulate complex user interactions and verify component behavior in isolation or integrated environments while maintaining project-specific coding standards.

Key Features

01Asynchronous testing utilities for DOM updates, nextTick, and API calls

02Resilient element selection strategies using data-test attribute patterns

03Guidance for testing Vue 3 Composables and Vue Router integrations

04Integrated Pinia store mocking using createTestingPinia

050 GitHub stars

06Standardized component mounting patterns for both mount and shallowMount

Use Cases

01Simulating and verifying complex user interactions like form submissions and events

02Mocking global state and routing to test components in isolation

03Unit and integration testing of Vue 3 components using the Composition API

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