Skip to content

Commit 1f4339f

Browse files
authored
docs: update Vuex guide (#666)
1 parent 318cb79 commit 1f4339f

File tree

1 file changed

+17
-11
lines changed

1 file changed

+17
-11
lines changed

Diff for: docs/guides/using-with-vuex.md

+17-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
## Using with Vuex
1+
# Using with Vuex
22

33
In this guide, we'll see how to test Vuex in components with Vue Test Utils, and how to approach testing a Vuex store.
44

5+
## Testing Vuex in components
6+
57
### Mocking Actions
68

79
Let’s look at some code.
@@ -214,14 +216,14 @@ And the test:
214216
``` js
215217
import { shallowMount, createLocalVue } from '@vue/test-utils'
216218
import Vuex from 'vuex'
217-
import Modules from '../../../src/components/Modules'
218-
import module from '../../../src/store/module'
219+
import MyComponent from '../../../src/components/MyComponent'
220+
import mymodule from '../../../src/store/mymodule'
219221

220222
const localVue = createLocalVue()
221223

222224
localVue.use(Vuex)
223225

224-
describe('Modules.vue', () => {
226+
describe('MyComponent.vue', () => {
225227
let actions
226228
let state
227229
let store
@@ -238,23 +240,27 @@ describe('Modules.vue', () => {
238240
}
239241

240242
store = new Vuex.Store({
241-
state,
242-
actions,
243-
getters: module.getters
243+
modules: {
244+
mymodule: {
245+
state,
246+
actions,
247+
getters: module.getters
248+
}
249+
}
244250
})
245251
})
246252

247253
it('calls store action "moduleActionClick" when button is clicked', () => {
248-
const wrapper = shallowMount(Modules, { store, localVue })
254+
const wrapper = shallowMount(MyComponent, { store, localVue })
249255
const button = wrapper.find('button')
250256
button.trigger('click')
251257
expect(actions.moduleActionClick).toHaveBeenCalled()
252258
})
253259

254260
it('Renders "state.inputValue" in first p tag', () => {
255-
const wrapper = shallowMount(Modules, { store, localVue })
261+
const wrapper = shallowMount(MyComponent, { store, localVue })
256262
const p = wrapper.find('p')
257-
expect(p.text()).toBe(state.module.clicks.toString())
263+
expect(p.text()).toBe(state.clicks.toString())
258264
})
259265
})
260266
```
@@ -385,4 +391,4 @@ Notice that we use `cloneDeep` to clone the store config before creating a store
385391
- [Example project for testing the components](https://github.com/eddyerburgh/vue-test-utils-vuex-example)
386392
- [Example project for testing the store](https://github.com/eddyerburgh/testing-vuex-store-example)
387393
- [`localVue`](../api/options.md#localvue)
388-
- [`createLocalVue`](../api/createLocalVue.md)
394+
- [`createLocalVue`](../api/createLocalVue.md)

0 commit comments

Comments
 (0)