When should I use mount() vs shallowMount()?

Use mount() by default for realistic integration testing that includes child components. Use shallowMount() only for performance-heavy components or when strict isolation is required.

Why should I use data-test attributes for selectors?

Unlike CSS classes or IDs, data-test attributes act as a stable testing contract that does not break when styling changes or internal logic is refactored.

How does this skill handle asynchronous Vue updates?

It provides patterns for using flushPromises() and mandates awaiting DOM-updating methods like setValue() and trigger() to prevent flaky tests.

Does this support Pinia store testing?

Yes, it includes specific patterns for mocking Pinia stores using createTestingPinia, allowing you to easily simulate state and verify store actions.

Vue Test Utils Mastery

Name: Vue Test Utils Mastery
Author: agents-inc

byagents-inc

•

Security & Testing

Implements professional Vue 3 component testing patterns using Vue Test Utils, covering DOM interactions, Pinia mocking, and asynchronous state updates.

This skill provides a comprehensive framework for testing Vue 3 components with the Composition API. It guides developers through the nuances of full vs. shallow mounting, ensures reliable DOM assertions using data-test attributes, and provides robust patterns for handling asynchronous operations like API calls and store state changes. By standardizing practices around event triggering, prop validation, and store mocking, it helps maintain high test fidelity in complex frontend applications using Pinia and Vue Router.

Key Features

01Comprehensive Wrapper API usage for event and prop assertions

02Standardized mounting patterns using both mount() and shallowMount()

03Automated Pinia store mocking via createTestingPinia patterns

04Reliable DOM querying strategies focused on data-test attributes

051 GitHub stars

06Async testing utilities for handling flushPromises and nextTick

Use Cases

01Unit testing complex Vue 3 components with nested children and slots

02Simulating and verifying user interactions like form submissions and inputs

03Testing component behavior dependent on Pinia state or Vue Router navigation

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

01Comprehensive Wrapper API usage for event and prop assertions

02Standardized mounting patterns using both mount() and shallowMount()

03Automated Pinia store mocking via createTestingPinia patterns

04Reliable DOM querying strategies focused on data-test attributes

051 GitHub stars

06Async testing utilities for handling flushPromises and nextTick

Use Cases

01Unit testing complex Vue 3 components with nested children and slots

02Simulating and verifying user interactions like form submissions and inputs

03Testing component behavior dependent on Pinia state or Vue Router navigation

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