vuex-mock-store

vuex-mock-store

Simple and straightforward mock for Vuex v3.x Store

Supports using mapMutations and mapActions as well as directly doing this.$store.commit() and this.$store.dispatch()

Installation

npm install -D vuex-mock-store
# with yarn
yarn add -D vuex-mock-store

Usage

ℹ️: All examples use Jest API. See below to use a different mock library.

Usage with vue-test-utils:

import { Store } from 'vuex-mock-store'
import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

// create the Store mock
const store = new Store()
// add other mocks here so they are accessible in every component
const mocks = {
  $store: store,
}

// reset spies, initial state and getters
afterEach(() => store.reset())

describe('MyComponent.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(MyComponent, { mocks })
  })

  it('commits init on creation', () => {
    expect(store.commit).toHaveBeenCalledOnce()
    expect(store.commit).toHaveBeenCalledWith('init')
  })

  it('dispatch save when clicking button', () => {
    wrapper.find('button.save').trigger('click')
    expect(store.dispatch).toHaveBeenCalledOnce()
    expect(store.dispatch).toHaveBeenCalledWith('save', { name: 'Eduardo' })
  })
})

Initial state and getters

You can provide a getters, and state object to mock them:

const store = new Store({
  getters: {
    name: 'Eduardo',
  },
  state: {
    counter: 0,
  },
})

Modules

To mock modules state, simply provide a nested object for state:

new Store({
  state: {
    moduleA: {
      moduleC: {
        value: 'foo',
      },
    },
    moduleB: {
      value: 'bar',
    },
  },
})

Testing actions and mutations depend whether your modules are namespaced or not. If they are namespaced, make sure to provide the full action/mutation name:

// namespaced module
expect(store.commit).toHaveBeenCalledWith('moduleA/setValue')
expect(store.dispatch).toHaveBeenCalledWith('moduleA/postValue')
// non-namespaced
expect(store.commit).toHaveBeenCalledWith('setValue')
expect(store.dispatch).toHaveBeenCalledWith('postValue')

Mutating state, providing custom getters

You can modify the state and getters directly for any test. Calling store.reset() will reset them to the initial values provided.

API

Store class

constructor(options)

• options
  • state: initial state object, default: {}
  • getters: getters object, default: {}
  • spy: interface to create spies. details below

state

Store state. You can directly modify it to change state:

store.state.name = 'Jeff'

getters

Store getters. You can directly modify it to change a value:

store.getters.upperCaseName = 'JEFF'

reset

Reset commit and dispatch spies and restore getters and state to their initial values

Providing custom spies

By default, the Store will call jest.fn() to create the spies. This will throw an error if you are using mocha or any other test framework that isn't Jest. In that situation, you will have to provide an interface to create and reset spies. This is the default interface that uses jest.fn():

new Store({
  spy: {
    create: () => jest.fn(),
    reset: spy => spy.mockRestore(),
  },
})

If you use Jest, you don't need to do anything. If you are using something else like Sinon, you could provide this interface:

import sinon from 'sinon'

new Store({
  spy: {
    create: () => sinon.spy(),
    reset: spy => spy.restore(),
  },
})

### `commit` & `dispatch`

Spies. Dependent on the testing framework

- [jest.fn](#https://jestjs.io/docs/en/mock-function-api)
- [sinon.spy](https://sinonjs.org/releases/v6.3.4/spies)

## Related

- [vue-test-utils](https://github.com/vuejs/vue-test-utils)
- [vuex](https://github.com/vuejs/vuex)

## License

[MIT](http://opensource.org/licenses/MIT)