Skip to content

Commit e0e3493

Browse files
mykwillisposva
andauthored
docs: document createSpy with examples (#1138)
Co-authored-by: Eduardo San Martin Morote <[email protected]>
1 parent d6c3cf9 commit e0e3493

File tree

1 file changed

+38
-3
lines changed

1 file changed

+38
-3
lines changed

packages/docs/cookbook/testing.md

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ beforeEach(() => {
6666

6767
## Unit testing components
6868

69-
This can be achieved with `createTestingPinia()`. I haven't been able to write proper documentation for this yet but its usage can be discovered through autocompletion and the documentation that appears in tooltips.
69+
This can be achieved with `createTestingPinia()`, which returns a pinia instance designed to help unit tests components.
7070

7171
Start by installing `@pinia/testing`:
7272

@@ -94,8 +94,8 @@ store.name = 'my new name'
9494
store.$patch({ name: 'new name' })
9595
expect(store.name).toBe('new name')
9696

97-
// actions are stubbed by default but can be configured by
98-
// passing an option to `createTestingPinia()`
97+
// actions are stubbed by default, meaning they don't execute their code by default.
98+
// See below to customize this behavior.
9999
store.someAction()
100100

101101
expect(store.someAction).toHaveBeenCalledTimes(1)
@@ -104,6 +104,41 @@ expect(store.someAction).toHaveBeenLastCalledWith()
104104

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

107+
108+
### Customizing behavior of actions
109+
110+
`createTestingPinia` stubs out all store actions unless told otherwise. This allows you to test your components and stores separately.
111+
112+
If you want to revert this behavior and normally execute your actions during tests, specify `stubActions: false` when calling `createTestingPinia`:
113+
114+
```js
115+
const wrapper = mount(Counter, {
116+
global: {
117+
plugins: [createTestingPinia({ stubActions: false })],
118+
},
119+
})
120+
121+
const store = useSomeStore()
122+
123+
// Now this call WILL execute the implementation defined by the store
124+
store.someAction()
125+
126+
// ...but it's still wrapped with a spy, so you can inspect calls
127+
expect(store.someAction).toHaveBeenCalledTimes(1)
128+
129+
```
130+
131+
### Specifying the createSpy function
132+
133+
When using Jest, or vitest with `globals: true`, `createTestingPinia` automatically stubs actions using the spy function based on the existing test framework (`jest.fn` or `vitest.fn`). If you are using a different framework, you'll need to provide a [createSpy](/api/interfaces/pinia_testing.testingoptions.html#createspy) option:
134+
135+
```js
136+
import sinon from 'sinon'
137+
138+
createTestingPinia({
139+
createSpy: sinon.spy // use sinon's spy to wrap actions
140+
})
141+
107142
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).
108143

109144
## E2E tests

0 commit comments

Comments
 (0)