Helpers for Jest + Vue tests

__mocksStore__.js

// set this file into the store -> store/__mocks__/index.js

import Vue from 'vue'
import Vuex from 'vuex'

// your mocks
import state from './state'
import * as getters from './getters'
import mutations from './mutations'
import * as actions from './actions'

Vue.use(Vuex)

// eslint-disable-next-line no-underscore-dangle
export function createStoreMocks (custom = {
  getters: {}, mutations: {}, actions: {}, state: {}
}) {
  const mockGetters = { ...getters, ...custom.getters }
  const mockMutations = { ...mutations, ...custom.mutations }
  const mockActions = { ...actions, ...custom.actions }
  const mockState = { ...state, ...custom.state }

  return {
    getters: mockGetters,
    mutations: mockMutations,
    actions: mockActions,
    state: mockState,
    store: new Vuex.Store({
      getters: mockGetters,
      mutations: mockMutations,
      actions: mockActions,
      state: mockState
    })
  }
}

export const store = createStoreMocks().store

helpers.js

import Vuex from 'vuex'
import { createLocalVue, shallowMount } from '@vue/test-utils'
import { createStoreMocks } from '~/store/__mocks__'

export const configureLocalVue = ({ plugins, mixins, localVue }) => {
  // add plugins passed on params
  for (let plugin of plugins) {
    localVue.use(plugin)
  }

  // add mixins passed on params
  for (let mixin of mixins) {
    localVue.mixin(mixin)
  }
  
  // insert here your directives + default plugins 
  // ex.:
  // localVue.use(VueRouter)
}

export const configureStoreMocks = ({ localVue }) => {
  // Tell Jest to use the mock
  // implementation of the store.
  jest.mock('~/store')

  // use vuex
  localVue.use(Vuex)

  // return mocked store
  return createStoreMocks()
}

export const mountComponent = ({
  plugins = [],
  component,
  mountOptions,
  mixins = [],
  localVue = createLocalVue()
}) => {
  configureLocalVue({
    plugins,
    mixins,
    localVue
  })

  // mount component with options
  return shallowMount(
    component,
    {
      localVue,
      ...mountOptions
    })
}

index.spec.js

import { createLocalVue } from '@vue/test-utils'
import { mountComponent, configureStoreMocks } from './helpers'
import Foo from '~/components/Foo.vue'

describe('Company', () => {
  let wrapper
  let storeMocks
  beforeEach(() => {
    const localVue = createLocalVue()
    storeMocks = configureStoreMocks({localVue})
    wrapper = mountComponent({component: Foo, localVue, mountOptions: {store: storeMocks.store}})
  })
  it('should match with snapshot', () => {
    expect(wrapper.element).toMatchSnapshot()
  })
  it('should have the expected fakeStoreGetter', () => {
    expect(wrapper.vm.fakeStoreGetter).toEqual({
      name: null
    })
  })
})

package.json

{
  // if you need alias to recognize ~/
  // add this into the jest configuration
  {
    "moduleNameMapper": {
      "~(.*)$": "<rootDir>/$1"
    }
  },

  // if you need recognize dynamic imports 
  // add this into the babel config
  {
    "plugins": [
      "transform-runtime",
      "dynamic-import-node"
    ]
  }
}