1---
2title: Configure Pinia Testing with createTestingPinia and setActivePinia
3impact: HIGH
4impactDescription: Missing Pinia configuration causes 'injection Symbol(pinia) not found' errors and failing tests
5type: gotcha
6tags: [vue3, testing, pinia, vitest, store, mocking, createTestingPinia]
7---
8 
9# Configure Pinia Testing with createTestingPinia and setActivePinia
10 
11**Impact: HIGH** - Testing components or composables that use Pinia stores without proper configuration results in "[Vue warn]: injection Symbol(pinia) not found" errors. Tests will fail or behave unexpectedly.
12 
13Use `@pinia/testing` package with `createTestingPinia` for component tests and `setActivePinia(createPinia())` for unit testing stores directly.
14 
15## Task Checklist
16 
17- [ ] Install `@pinia/testing` as a dev dependency
18- [ ] Use `createTestingPinia` in component tests with `global.plugins`
19- [ ] Use `setActivePinia(createPinia())` in `beforeEach` for store unit tests
20- [ ] Configure `createSpy: vi.fn` when NOT using `globals: true` in Vitest
21- [ ] Initialize store inside each test to get fresh state
22- [ ] Use `stubActions: false` when you need real action execution
23 
24**Incorrect:**
25```javascript
26import { mount } from '@vue/test-utils'
27import UserProfile from './UserProfile.vue'
28 
29// BAD: Missing Pinia - causes injection error
30test('displays user name', () => {
31  const wrapper = mount(UserProfile)  // ERROR: injection "Symbol(pinia)" not found
32  expect(wrapper.text()).toContain('John')
33})
34```
35 
36```javascript
37import { useUserStore } from '@/stores/user'
38 
39// BAD: No active Pinia instance
40test('user store actions', () => {
41  const store = useUserStore()  // ERROR: no active Pinia
42  store.login('john', 'password')
43})
44```
45 
46**Correct - Component Testing:**
47```javascript
48import { mount } from '@vue/test-utils'
49import { createTestingPinia } from '@pinia/testing'
50import { vi } from 'vitest'
51import UserProfile from './UserProfile.vue'
52import { useUserStore } from '@/stores/user'
53 
54// CORRECT: Provide testing pinia with stubbed actions
55test('displays user name', () => {
56  const wrapper = mount(UserProfile, {
57    global: {
58      plugins: [
59        createTestingPinia({
60          createSpy: vi.fn,  // Required if not using globals: true
61          initialState: {
62            user: { name: 'John', email: '[email protected]' }
63          }
64        })
65      ]
66    }
67  })
68 
69  expect(wrapper.text()).toContain('John')
70})
71 
72// CORRECT: Test with stubbed actions (default behavior)
73test('calls logout action', async () => {
74  const wrapper = mount(UserProfile, {
75    global: {
76      plugins: [createTestingPinia({ createSpy: vi.fn })]
77    }
78  })
79 
80  // Get store AFTER mounting with createTestingPinia
81  const store = useUserStore()
82 
83  await wrapper.find('[data-testid="logout"]').trigger('click')
84 
85  // Actions are stubbed and wrapped in spies
86  expect(store.logout).toHaveBeenCalled()
87})
88```
89 
90**Correct - Store Unit Testing:**
91```javascript
92import { describe, it, expect, beforeEach, vi } from 'vitest'
93import { setActivePinia, createPinia } from 'pinia'
94import { useUserStore } from '@/stores/user'
95 
96describe('User Store', () => {
97  beforeEach(() => {
98    // Create fresh Pinia instance for each test
99    setActivePinia(createPinia())
100  })
101 
102  it('initializes with empty user', () => {
103    const store = useUserStore()
104    expect(store.user).toBeNull()
105    expect(store.isLoggedIn).toBe(false)
106  })
107 
108  it('updates user on login', async () => {
109    const store = useUserStore()
110 
111    // Real action executes - not stubbed
112    await store.login('john', 'password')
113 
114    expect(store.user).toEqual({ name: 'John' })
115    expect(store.isLoggedIn).toBe(true)
116  })
117 
118  it('clears user on logout', () => {
119    const store = useUserStore()
120    store.user = { name: 'John' }  // Set initial state
121 
122    store.logout()
123 
124    expect(store.user).toBeNull()
125  })
126})
127```
128 
129## Testing with Real Actions vs Stubbed Actions
130 
131```javascript
132import { createTestingPinia } from '@pinia/testing'
133 
134// Stubbed actions (default) - for isolation
135const wrapper = mount(Component, {
136  global: {
137    plugins: [
138      createTestingPinia({
139        createSpy: vi.fn,
140        // stubActions: true (default) - actions are mocked
141      })
142    ]
143  }
144})
145 
146// Real actions - for integration testing
147const wrapper = mount(Component, {
148  global: {
149    plugins: [
150      createTestingPinia({
151        createSpy: vi.fn,
152        stubActions: false  // Actions execute normally
153      })
154    ]
155  }
156})
157```
158 
159## Mocking Specific Action Implementations
160 
161```javascript
162import { mount } from '@vue/test-utils'
163import { createTestingPinia } from '@pinia/testing'
164import { vi } from 'vitest'
165import { useCartStore } from '@/stores/cart'
166 
167test('handles checkout failure', async () => {
168  const wrapper = mount(Checkout, {
169    global: {
170      plugins: [createTestingPinia({ createSpy: vi.fn })]
171    }
172  })
173 
174  const cartStore = useCartStore()
175 
176  // Mock specific action behavior
177  cartStore.checkout.mockRejectedValue(new Error('Payment failed'))
178 
179  await wrapper.find('[data-testid="checkout"]').trigger('click')
180  await flushPromises()
181 
182  expect(wrapper.find('.error').text()).toContain('Payment failed')
183})
184```
185 
186## Spying on Actions with vi.spyOn
187 
188```javascript
189import { setActivePinia, createPinia } from 'pinia'
190import { vi } from 'vitest'
191import { useUserStore } from '@/stores/user'
192 
193test('tracks action calls', async () => {
194  setActivePinia(createPinia())
195  const store = useUserStore()
196 
197  const loginSpy = vi.spyOn(store, 'login')
198  loginSpy.mockResolvedValue({ success: true })
199 
200  await store.login('john', 'password')
201 
202  expect(loginSpy).toHaveBeenCalledWith('john', 'password')
203})
204```
205 
206## Testing Store $subscribe
207 
208```javascript
209import { setActivePinia, createPinia } from 'pinia'
210import { useUserStore } from '@/stores/user'
211 
212test('subscription triggers on state change', () => {
213  setActivePinia(createPinia())
214  const store = useUserStore()
215 
216  const callback = vi.fn()
217  store.$subscribe(callback)
218 
219  store.user = { name: 'John' }
220 
221  expect(callback).toHaveBeenCalled()
222})
223```
224 
225## Reference
226- [Pinia Testing Guide](https://pinia.vuejs.org/cookbook/testing.html)
227- [@pinia/testing Package](https://www.npmjs.com/package/@pinia/testing)
228- [Vue Test Utils - Plugins](https://test-utils.vuejs.org/guide/advanced/plugins.html)
229