vuex-test-helpers v0.2.0
Vuex test helpers
A helper library to construct mock Vuex stores for tests
Installation
$ npm install -D vuex-test-helpersDependencies
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
Returns a MockStoreWrapper object which can be used to build a mock store.
const mockStore = createMockStore().storeUpdates 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 valueUpdates 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 valueCreates 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' }
// }
// }
// }