1- ## Using with Vuex
1+ # Using with Vuex
22
33In 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
79Let’s look at some code.
@@ -214,14 +216,14 @@ And the test:
214216``` js
215217import { shallowMount , createLocalVue } from ' @vue/test-utils'
216218import 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
220222const localVue = createLocalVue ()
221223
222224localVue .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