unit-test-vue-pinia

Use this skill to create or review unit tests for Vue components, composables, and Pinia stores. Keep tests small, deterministic, and behavior-first.

Workflow

1. Identify the behavior boundary first: component UI behavior, composable behavior, or store behavior.
2. Choose the narrowest test style that can prove that behavior.
3. Set up Pinia with the least powerful option that still covers the scenario.
4. Drive the test through public inputs such as props, form updates, button clicks, emitted child events, and store APIs.
5. Assert observable outputs and side effects before considering any instance-level assertion.
6. Return or review tests with clear behavior-oriented names and note any remaining coverage gaps.

Core Rules

• Test one behavior per test.
• Assert observable input/output behavior first (rendered text, emitted events, callback calls, store state changes).
• Avoid implementation-coupled assertions.
• Access wrapper.vm only in exceptional cases when there is no reasonable DOM, prop, emit, or store-level assertion.