Vuex test helpers

A helper library to construct mock Vuex stores for tests

Installation

1$ npm install -D vuex-test-helpers

Dependencies

Vuex test helpers currently requires testdouble.js. Vuex test helpers uses td.function() to create mock actions and getters. You should install testdouble as a dev dependency in your project as well.

Example usage

Let's say we have a Vue component, MyComponent, that uses state data and an action from a Vuex store:

myComponent.vue

1<template>
2  <div>
3    <h1>{{ message }}</h1>
4
5    <button @click="loadData" id="fetch">Load awesome data!</button>
6
7    <div v-if="superAwesomeData" id="super-awesome-data">
8      {{ superAwesomeData }}
9    </div>
10  </div>
11</template>
12
13<script>
14import { mapState, mapGetters } from 'vuex'
15export default {
16  name: 'MyModule',
17  data() {
18    return {
19      superAwesomeData: undefined
20    }
21  },
22  computed: {
23    ...mapState(['message'])
24  },
25  methods: {
26    ...mapActions(['fetchData']),
27    loadData() {
28      this.fetchData()
29        .then(data => {
30          this.superAwesomeData = data
31        })
32    }
33  }
34}
35</script>

MyComponent.spec.js

1import MyComponent from '@/components/MyComponent'
2import { shallow, createLocalVue } from '@vue/test-utils',
3import { createMockStore } from 'vuex-test-helpers'
4import Vuex from 'vuex'
5
6describe('MyComponent', () => {
7  let wrapper, subject, store
8
9  beforeEach(() => {
10    const localVue = createLocalVue()
11    localVue.use(Vuex)
12
13    { store } = createMockStore()
14      .withState({ message: 'Hello world!' })
15      .withActions(['fetchData'])
16
17    wrapper = shallow(MyComponent, {
18      localVue,
19      store: new Vuex.Store(store)
20    })
21
22    subject = wrapper.vm
23  })
24
25  it('renders the message from the store', () => {
26    expect(wrapper.find('h1').text()).to.equal('Hello world!')
27    expect
28  })
29
30  describe('when the fetch button is clicked', () => {
31    beforeEach(() => {
32      td.when(store.actions.fetchData()).thenResolve('the super awesome data')
33      wrapper.find('#fetch').trigger('click')
34    })
35
36    it('renders the response', () => {
37      expect(wrapper.find('#super-awesome-data').text()).to.equal('the super awesome data')
38    })
39  })
40})

API

• createMockStore

  • withState
  • withGetters
  • withActions
  • withModule

• createMockModule

  • withState
  • withGetters
  • withActions
  • withModule

createMockStore() : Returns MockStoreWrapper

Returns a MockStoreWrapper object which can be used to build a mock store.

1const mockStore = createMockStore().store

withState(state: Object) : Returns MockStoreWrapper

Updates the working store with the given state object. If no state is provided, the store will default state to an empty object.

Returns a MockStoreWrapper so all methods are chainable.

1const mockStore = createMockStore().withState({foo: 'bar'})
2
3console.log(mockStore.store.state) // { foo: 'bar' }

withGetters(getters: Array) : Returns MockStoreWrapper

Updates the working store with mock getters. If no getters are provided, the store will create a default empty getters object.

Returns a MockStoreWrapper so all methods are chainable.

1const mockStore = createMockStore().withGetters(['myGetter'])
2
3// in a spec
4td.when(mockStore.store.getters.myGetter()).thenReturn('my getter value')
5
6// in a view component that has mapped myGetter
7console.log(this.myGetter) // my getter value

withActions(actions: Array) : Returns MockStoreWrapper

Updates the working store with mock actions. If no actions are provided, the store will create a default empty actions object.

Returns a MockStoreWrapper so all methods are chainable.

1const mockStore = createMockStore().withActions(['myAction'])
2
3// in a spec
4td.when(mockStore.store.actions.myAction()).thenResolve('my action result')
5
6// in a view component that has mapped myAction
7this.myAction().then(result => {
8  console.log(result) // my action result
9})

withModule(name: String, module: Object) : Returns MockStoreWrapper

Adds a module with the given name to the working store. If no name is provider a default, empty modules object is created. Use this method to add modules created with createMockModule to your store.

Returns a MockStoreWrapper so all methods are chainable.

1const testModule = createMockModule('test').withState({foo: 'bar'})
2const mockStore = createMockStore().withModule(testModule.name, testModule.module)
3console.log(mockStore.store.modules) // { test: { state: { foo: 'bar' } } }

createMockModule(name: String) : Returns MockModuleWrapper

Returns a MockModuleWrapper object which can be used to build a mock module.

1const mockModule = createMockModule('test')
2console.log(mockModule.name) // test
3console.log(mockModule.module) // {}

withState(state : Object) : Returns MockModuleWrapper

Updates the modules state with the given object. If no object is provided a default empty object is created.

Returns a MockModuleWrapper so all methods are chainable.

1const testModule = createMockModule('test').withState({foo: 'bar'})
2console.log(testModule.module.state) // { foo: 'bar' }

withGetters(getters : Array) : Returns MockModuleWrapper

Creates mocked getters for the module. If no getters are provided a default empty getters object is created.

Returns a MockModuleWrapper so all methods are chainable.

1const mockModule = createMockModule('test').withGetters(['myGetter'])
2
3// in a spec
4td.when(mockModule.module.getters.myGetter()).thenReturn('my getter value')
5
6// in a view component that has mapped myGetter from the test module
7console.log(this.myGetter) // my getter value

withActions(actions : Array) : Returns MockModuleWrapper

Creates mocked actions for the module. If no actions are provided a default empty actions object is created.

Returns a MockModuleWrapper so all methods are chainable.

1const mockModule = createMockModule('test').withActions(['myAction'])
2
3// in a spec
4td.when(mockModule.module.actions.myAction()).thenResolve('my action result')
5
6// in a view component that has mapped myAction from the test module
7this.myAction().then(result => {
8  console.log(result) // my action result
9})

withModule(name: String, module: Object) : Returns MockModuleWrapper

Adds a module with the given name to the current module. If no name is provider a default, empty modules object is created. You can use this method to create store structures that have nested modules infitely deep.

Returns a MockModuleWrapper so all methods are chainable.

1const testModule = createMockModule('test').withState({foo: 'bar'})
2const nestedModule = createMockModule('nested').withState({ nested: 'state' })
3
4testModule.withModule(nestedModule.name, nestedModule.module)
5console.log(testModule.module)
6// {
7//   state: { foo: 'bar' },
8//   modules: {
9//     nested: {
10//       state: { nested: 'state' }
11//     }
12//   }
13// }