Skip to content

Commit 4af52e9

Browse files
committed
docs(testing): remove example using mock with inject-loader because it no longer works and causes confusion for beginners. Use the existing spy implementation instead.
1 parent e0ea5b8 commit 4af52e9

File tree

1 file changed

+2
-61
lines changed

1 file changed

+2
-61
lines changed

docs/guide/testing.md

Lines changed: 2 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,9 @@ describe('mutations', () => {
5151

5252
## Testing Actions
5353

54-
Actions can be a bit more tricky because they may call out to external APIs. When testing actions, we usually need to do some level of mocking - for example, we can abstract the API calls into a service and mock that service inside our tests. In order to easily mock dependencies, we can use webpack and [inject-loader](https://github.com/plasticine/inject-loader) to bundle our test files.
54+
Actions can be a bit more tricky because they may call out to external APIs. When testing actions, we usually need to do some level of mocking and spying - for example, we can abstract the API calls into a service and mock that service inside our tests.
5555

56-
Example testing an async action:
56+
The following code assumes your testing environment uses [Sinon.JS](http://sinonjs.org/):
5757

5858
```js
5959
// actions.js
@@ -70,67 +70,8 @@ export const getAllProducts = ({ commit }) => {
7070
```js
7171
// actions.spec.js
7272

73-
// use require syntax for inline loaders.
74-
// with inject-loader, this returns a module factory
75-
// that allows us to inject mocked dependencies.
7673
import { expect } from 'chai'
77-
const actionsInjector = require('inject-loader!./actions')
78-
79-
// create the module with our mocks
80-
const actions = actionsInjector({
81-
'../api/shop': {
82-
getProducts (cb) {
83-
setTimeout(() => {
84-
cb([ /* mocked response */ ])
85-
}, 100)
86-
}
87-
}
88-
})
89-
90-
// helper for testing action with expected mutations
91-
const testAction = (action, payload, state, expectedMutations, done) => {
92-
let count = 0
93-
94-
// mock commit
95-
const commit = (type, payload) => {
96-
const mutation = expectedMutations[count]
97-
98-
try {
99-
expect(type).to.equal(mutation.type)
100-
expect(payload).to.deep.equal(mutation.payload)
101-
} catch (error) {
102-
done(error)
103-
}
104-
105-
count++
106-
if (count >= expectedMutations.length) {
107-
done()
108-
}
109-
}
110-
111-
// call the action with mocked store and arguments
112-
action({ commit, state }, payload)
11374

114-
// check if no mutations should have been dispatched
115-
if (expectedMutations.length === 0) {
116-
expect(count).to.equal(0)
117-
done()
118-
}
119-
}
120-
121-
describe('actions', () => {
122-
it('getAllProducts', done => {
123-
testAction(actions.getAllProducts, null, {}, [
124-
{ type: 'REQUEST_PRODUCTS' },
125-
{ type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } }
126-
], done)
127-
})
128-
})
129-
```
130-
131-
If you have spies available in your testing environment (for example via [Sinon.JS](http://sinonjs.org/)), you can use them instead of the `testAction` helper:
132-
133-
```js
13475
describe('actions', () => {
13576
it('getAllProducts', () => {
13677
const commit = sinon.spy()

0 commit comments

Comments
 (0)