unit-test-vue-pinia

Writes and reviews unit tests for Vue 3 components, composables, and Pinia stores with Vitest.

Updated Aug 2, 2026
One-click install
npx skills add https://github.com/jeje-it/template-projet --skill unit-test-vue-pinia-jeje-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: unit-test-vue-pinia
Source: https://github.com/jeje-it/template-projet/tree/main/.agents/skills/unit-test-vue-pinia
Command: npx skills add https://github.com/jeje-it/template-projet --skill unit-test-vue-pinia-jeje-it

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing unit tests for Vue 3 applications that use Pinia often leads to brittle, implementation-coupled tests or incorrect store mocking. This Skill provides a structured workflow and canonical patterns for testing components, composables, and stores with Vitest, Vue Test Utils, and createTestingPinia, keeping tests behavior-first and deterministic. ## Core Features & Use Cases - Pinia Test Setup Guidance: Standard patterns for createTestingPinia, including action spying with createSpy, state seeding with initialState, executing real actions with stubActions, and getter overrides. - Behavior-First Test Rules: Enforces assertions on observable outputs (rendered text, emitted events, store state) instead of internal implementation details like wrapper.vm. - Test Review Mode: Flags missing coverage, brittle selectors, and implementation-coupled assertions when reviewing existing tests. - Use Case: When adding a new Vue component that reads from a Pinia store, use this Skill to generate a mount-based test that seeds store state, triggers user interactions, and asserts emitted events without touching component internals. ## Quick Start Write a unit test for my Vue component that submits a form and updates a Pinia store, using createTestingPinia with spied actions.

Frequently Asked Questions about unit-test-vue-pinia

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test a Vue component that uses a Pinia store?▼

Mount the component with createTestingPinia registered as a global plugin, passing createSpy: vi.fn to spy on actions. Seed state with initialState if needed, then drive the test through props and user interactions and assert rendered output or emitted events.

How to test Pinia store actions with Vitest?▼

For pure store tests, call setActivePinia(createPinia()) in beforeEach, invoke the action, and assert state changes directly. Use createTestingPinia only when you need stubbed dependent stores, seeded state, or action spies.

When should I use stubActions false in createTestingPinia?▼

Use stubActions: false only when the test must validate the real behavior and side effects inside an action. For simple checks that an action was or was not called, keep the default stubbed behavior.

Is it okay to access wrapper.vm in Vue Test Utils tests?▼

Access wrapper.vm only as an exception when no DOM assertion, emitted event, prop, or store-level assertion can express the behavior. Prefer black-box assertions on rendered text, emitted payloads, and store state to avoid coupling tests to implementation details.

Should I use shallowMount or mount for Vue component unit tests?▼

Mount shallow by default for focused unit tests so child components are stubbed. Use full mounting only when integration behavior between components is the actual subject of the test.