unit-test-vue-pinia

Mount the component with createTestingPinia registered as a global plugin, passing createSpy: vi.fn so actions are stubbed and spied. Then drive behavior through props and DOM events, and assert emitted events or action calls.

Use createTestingPinia from @pinia/testing, which stubs actions by default and wraps them in spies when createSpy: vi.fn is set. Assert calls with expect(store.action).toHaveBeenCalledTimes(n) without executing real action logic.

Use createPinia with setActivePinia for pure store unit tests that validate real state transitions and action behavior. Use createTestingPinia only when you need stubbed dependent stores, seeded state, or action spies in component tests.

Pass an initialState object to createTestingPinia keyed by store id, such as initialState: { counter: { n: 20 } }. The mounted component then reads the seeded values without executing any actions.

Accessing wrapper.vm couples tests to internal component implementation, making them brittle to refactors. Prefer asserting rendered DOM, emitted events, props, or store state, and treat wrapper.vm as an exception only when no public interface expresses the behavior.

Set stubActions: false only when the test must validate the real behavior and side effects inside an action. For simple call or no-call assertions, keep the default stubbing to keep tests fast and isolated.