Files
awesome-copilot/skills/unit-test-vue-pinia/references/pinia-patterns.md
2026-03-16 10:39:36 +11:00

96 lines
1.8 KiB
Markdown

# Pinia Testing Snippets (Cookbook-Aligned)
Use these patterns directly when writing tests with `@pinia/testing`.
## Component mount with `createTestingPinia`
```ts
import { mount } from "@vue/test-utils";
import { createTestingPinia } from "@pinia/testing";
import { vi } from "vitest";
const wrapper = mount(ComponentUnderTest, {
global: {
plugins: [
createTestingPinia({
createSpy: vi.fn,
}),
],
},
});
```
## Execute real actions
Use this only when behavior inside the action must run.
If the test only checks call/no-call expectations, keep default stubbing (`stubActions: true`).
```ts
const wrapper = mount(ComponentUnderTest, {
global: {
plugins: [
createTestingPinia({
createSpy: vi.fn,
stubActions: false,
}),
],
},
});
```
## Seed starting state
```ts
const wrapper = mount(ComponentUnderTest, {
global: {
plugins: [
createTestingPinia({
createSpy: vi.fn,
initialState: {
counter: { n: 10 },
profile: { name: "Sherlock Holmes" },
},
}),
],
},
});
```
## Use store in test and assert action call
```ts
const pinia = createTestingPinia({ createSpy: vi.fn });
const store = useCounterStore(pinia);
store.increment();
expect(store.increment).toHaveBeenCalledTimes(1);
```
## Add plugin under test
```ts
const wrapper = mount(ComponentUnderTest, {
global: {
plugins: [
createTestingPinia({
createSpy: vi.fn,
plugins: [myPiniaPlugin],
}),
],
},
});
```
## Override and reset getters for edge tests
```ts
const pinia = createTestingPinia({ createSpy: vi.fn });
const store = useCounterStore(pinia);
store.double = 42;
expect(store.double).toBe(42);
// @ts-expect-error test-only reset
store.double = undefined;
```