1
- ## Using with Vuex
1
+ # Using with Vuex
2
2
3
3
In this guide, we'll see how to test Vuex in components with Vue Test Utils, and how to approach testing a Vuex store.
4
4
5
+ ## Testing Vuex in components
6
+
5
7
### Mocking Actions
6
8
7
9
Let’s look at some code.
@@ -214,14 +216,14 @@ And the test:
214
216
``` js
215
217
import { shallowMount , createLocalVue } from ' @vue/test-utils'
216
218
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 '
219
221
220
222
const localVue = createLocalVue ()
221
223
222
224
localVue .use (Vuex)
223
225
224
- describe (' Modules .vue' , () => {
226
+ describe (' MyComponent .vue' , () => {
225
227
let actions
226
228
let state
227
229
let store
@@ -238,23 +240,27 @@ describe('Modules.vue', () => {
238
240
}
239
241
240
242
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
+ }
244
250
})
245
251
})
246
252
247
253
it (' calls store action "moduleActionClick" when button is clicked' , () => {
248
- const wrapper = shallowMount (Modules , { store, localVue })
254
+ const wrapper = shallowMount (MyComponent , { store, localVue })
249
255
const button = wrapper .find (' button' )
250
256
button .trigger (' click' )
251
257
expect (actions .moduleActionClick ).toHaveBeenCalled ()
252
258
})
253
259
254
260
it (' Renders "state.inputValue" in first p tag' , () => {
255
- const wrapper = shallowMount (Modules , { store, localVue })
261
+ const wrapper = shallowMount (MyComponent , { store, localVue })
256
262
const p = wrapper .find (' p' )
257
- expect (p .text ()).toBe (state .module . clicks .toString ())
263
+ expect (p .text ()).toBe (state .clicks .toString ())
258
264
})
259
265
})
260
266
```
@@ -385,4 +391,4 @@ Notice that we use `cloneDeep` to clone the store config before creating a store
385
391
- [ Example project for testing the components] ( https://github.com/eddyerburgh/vue-test-utils-vuex-example )
386
392
- [ Example project for testing the store] ( https://github.com/eddyerburgh/testing-vuex-store-example )
387
393
- [ ` localVue ` ] ( ../api/options.md#localvue )
388
- - [ ` createLocalVue ` ] ( ../api/createLocalVue.md )
394
+ - [ ` createLocalVue ` ] ( ../api/createLocalVue.md )
0 commit comments