Vuex test helpers

A helper library to construct mock Vuex stores for tests

Installation

$ 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

<template>
  <div>
    <h1>{{ message }}</h1>

    <button @click="loadData" id="fetch">Load awesome data!</button>

    <div v-if="superAwesomeData" id="super-awesome-data">
      {{ superAwesomeData }}
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'MyModule',
  data() {
    return {
      superAwesomeData: undefined
    }
  },
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['fetchData']),
    loadData() {
      this.fetchData()
        .then(data => {
          this.superAwesomeData = data
        })
    }
  }
}
</script>

MyComponent.spec.js

import MyComponent from '@/components/MyComponent'
import { shallow, createLocalVue } from '@vue/test-utils',
import { createMockStore } from 'vuex-test-helpers'
import Vuex from 'vuex'

describe('MyComponent', () => {
  let wrapper, subject, store

  beforeEach(() => {
    const localVue = createLocalVue()
    localVue.use(Vuex)

    { store } = createMockStore()
      .withState({ message: 'Hello world!' })
      .withActions(['fetchData'])

    wrapper = shallow(MyComponent, {
      localVue,
      store: new Vuex.Store(store)
    })

    subject = wrapper.vm
  })

  it('renders the message from the store', () => {
    expect(wrapper.find('h1').text()).to.equal('Hello world!')
    expect
  })

  describe('when the fetch button is clicked', () => {
    beforeEach(() => {
      td.when(store.actions.fetchData()).thenResolve('the super awesome data')
      wrapper.find('#fetch').trigger('click')
    })

    it('renders the response', () => {
      expect(wrapper.find('#super-awesome-data').text()).to.equal('the super awesome data')
    })
  })
})

API

• createMockStore

  • withState
  • withGetters
  • withActions
  • withModule

• createMockModule

  • withState
  • withGetters
  • withActions
  • withModule

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

const mockStore = createMockStore().store

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.

const mockStore = createMockStore().withState({foo: 'bar'})

console.log(mockStore.store.state) // { foo: 'bar' }

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.

const mockStore = createMockStore().withGetters(['myGetter'])

// in a spec
td.when(mockStore.store.getters.myGetter()).thenReturn('my getter value')

// in a view component that has mapped myGetter
console.log(this.myGetter) // my getter value

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.

const mockStore = createMockStore().withActions(['myAction'])

// in a spec
td.when(mockStore.store.actions.myAction()).thenResolve('my action result')

// in a view component that has mapped myAction
this.myAction().then(result => {
  console.log(result) // my action result
})

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.

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

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

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

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.

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

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.

const mockModule = createMockModule('test').withGetters(['myGetter'])

// in a spec
td.when(mockModule.module.getters.myGetter()).thenReturn('my getter value')

// in a view component that has mapped myGetter from the test module
console.log(this.myGetter) // my getter value

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.

const mockModule = createMockModule('test').withActions(['myAction'])

// in a spec
td.when(mockModule.module.actions.myAction()).thenResolve('my action result')

// in a view component that has mapped myAction from the test module
this.myAction().then(result => {
  console.log(result) // my action result
})

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.

const testModule = createMockModule('test').withState({foo: 'bar'})
const nestedModule = createMockModule('nested').withState({ nested: 'state' })

testModule.withModule(nestedModule.name, nestedModule.module)
console.log(testModule.module)
// {
//   state: { foo: 'bar' },
//   modules: {
//     nested: {
//       state: { nested: 'state' }
//     }
//   }
// }