Skip to content

Commit f20bc7e

Browse files
Flavsditzposva
andauthored
docs: showing how to use initialState in testing (#1166)
Co-authored-by: Eduardo San Martin Morote <[email protected]>
1 parent b80e03d commit f20bc7e

File tree

1 file changed

+38
-4
lines changed

1 file changed

+38
-4
lines changed

packages/docs/cookbook/testing.md

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ Depending on what or how you are testing, we need to take care of these three di
1111
- [Testing stores](#testing-stores)
1212
- [Unit testing a store](#unit-testing-a-store)
1313
- [Unit testing components](#unit-testing-components)
14+
- [Initial State](#initial-state)
15+
- [Customizing behavior of actions](#customizing-behavior-of-actions)
16+
- [Specifying the createSpy function](#specifying-the-createspy-function)
1417
- [E2E tests](#e2e-tests)
1518
- [Unit test components (Vue 2)](#unit-test-components-vue-2)
1619

@@ -104,6 +107,37 @@ expect(store.someAction).toHaveBeenLastCalledWith()
104107

105108
Please note that if you are using Vue 2, `@vue/test-utils` requires a [slightly different configuration](#unit-test-components-vue-2).
106109

110+
### Initial State
111+
112+
You can set the initial state of **all of your stores** when creating a testing pinia by passing an `initialState` object. This object will be used by the testing pinia to _patch_ stores when they are created. Let's say you want to initialize the state of this store:
113+
114+
```ts
115+
import { defineStore } from 'pinia'
116+
117+
const useCounterStore = defineStore('counter', {
118+
state: () => ({ n: 0 }),
119+
// ...
120+
})
121+
```
122+
123+
Since the store is named _"counter"_, you need to add a matching object to `initialState`:
124+
125+
```ts
126+
// somewhere in your test
127+
const wrapper = mount(Counter, {
128+
global: {
129+
plugins: [createTestingPinia(
130+
131+
initialState: {
132+
counter: { n: 20 }, // start the counter at 20 instead of 0
133+
},
134+
)],
135+
},
136+
})
137+
138+
const store = useSomeStore() // uses the testing pinia!
139+
store.n // 20
140+
```
107141

108142
### Customizing behavior of actions
109143

@@ -123,9 +157,8 @@ const store = useSomeStore()
123157
// Now this call WILL execute the implementation defined by the store
124158
store.someAction()
125159

126-
// ...but it's still wrapped with a spy, so you can inspect calls
160+
// ...but it's still wrapped with a spy, so you can inspect calls
127161
expect(store.someAction).toHaveBeenCalledTimes(1)
128-
129162
```
130163

131164
### Specifying the createSpy function
@@ -135,9 +168,10 @@ When using Jest, or vitest with `globals: true`, `createTestingPinia` automatica
135168
```js
136169
import sinon from 'sinon'
137170

138-
createTestingPinia({
139-
createSpy: sinon.spy // use sinon's spy to wrap actions
171+
createTestingPinia({
172+
createSpy: sinon.spy, // use sinon's spy to wrap actions
140173
})
174+
```
141175

142176
You can find more examples in [the tests of the testing package](https://github.com/vuejs/pinia/blob/v2/packages/testing/src/testing.spec.ts).
143177

0 commit comments

Comments
 (0)