Unable to import VueX store into router and router into store in Mocha tests

Question

Update 2

Link to issue created on VueX git repo: https://github.com/vuejs/vuex/issues/1509

Link to repo to be able to replicate: https://github.com/djam90/vuex-vue-router-issue

Update:

The problem occurs in this code in VueX, where rawModule is undefined and key is getters. I think this is because of circular dependencies where the store imports the router but the router imports the store.

function assertRawModule (path, rawModule) {
  Object.keys(assertTypes).forEach(function (key) {
    debugger; 
    if (!rawModule[key]) { return }

    var assertOptions = assertTypes[key];

    forEachValue(rawModule[key], function (value, type) {
      assert(
        assertOptions.assert(value),
        makeAssertionMessage(path, key, type, value, assertOptions.expected)
      );
    });
  });
}

My project is setup with Vue CLI 3 and using Vue, Vue Router, VueX, and Mocha for tests.

I have a situation where I need to import the router into the store, but also import the store into the router. This seems to work fine when running the app in browser, but if I import the store or the router into my test, I get a random error as follows:

 MOCHA  Testing...

 RUNTIME EXCEPTION  Exception occurred while loading your tests

TypeError: Cannot read property 'getters' of undefined
    at /home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:261:1
    at Array.forEach (<anonymous>)
    at assertRawModule (/home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:260:1)
    at ModuleCollection.register (/home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:186:1)
    at /home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:200:1
    at /home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:75:44
    at Array.forEach (<anonymous>)
    at forEachValue (/home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:75:1)
    at ModuleCollection.register (/home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:199:1)
    at new ModuleCollection (/home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:160:1)
    at new Store (/home/dan/code/garage/ui/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:311:1)
    at Module../src/store/store.js (/home/dan/code/garage/ui/dist/webpack:/src/store/store.js:12:16)
    at __webpack_require__ (/home/dan/code/garage/ui/dist/webpack:/webpack/bootstrap:25:1)
    at Module../src/router.js (/home/dan/code/garage/ui/dist/webpack:/src/router.js:1:1)
    at __webpack_require__ (/home/dan/code/garage/ui/dist/webpack:/webpack/bootstrap:25:1)
    at Module../src/store/modules/bookings.js (/home/dan/code/garage/ui/dist/webpack:/src/store/modules/bookings.js:1:1)
    at __webpack_require__ (/home/dan/code/garage/ui/dist/webpack:/webpack/bootstrap:25:1)
    at Module../tests/unit/store/bookings.spec.js (/home/dan/code/garage/ui/dist/webpack:/tests/unit/store/bookings.spec.js:1:1)
    at __webpack_require__ (/home/dan/code/garage/ui/dist/webpack:/webpack/bootstrap:25:1)
    at run (/home/dan/code/garage/ui/dist/webpack:/node_modules/mocha-webpack/lib/entry.js:3:20)
    at Array.forEach (<anonymous>)
    at Object../node_modules/mocha-webpack/lib/entry.js (/home/dan/code/garage/ui/dist/webpack:/node_modules/mocha-webpack/lib/entry.js:10:1)
    at __webpack_require__ (/home/dan/code/garage/ui/dist/webpack:/webpack/bootstrap:25:1)
    at /home/dan/code/garage/ui/dist/webpack:/webpack/bootstrap:116:1
    at Object.<anonymous> (/home/dan/code/garage/ui/dist/main.js:120:10)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object._module2.default._extensions.(anonymous function) [as .js] (/home/dan/code/garage/ui/node_modules/mocha-webpack/lib/util/registerRequireHook.js:148:12)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at /home/dan/code/garage/ui/node_modules/mocha/lib/mocha.js:250:27
    at Array.forEach (<anonymous>)
    at Mocha.loadFiles (/home/dan/code/garage/ui/node_modules/mocha/lib/mocha.js:247:14)
    at Mocha.run (/home/dan/code/garage/ui/node_modules/mocha/lib/mocha.js:576:10)

Here is my router:

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store/store'
import storage from '@/services/storage'

import Login from './views/Login.vue'
import Dashboard from './views/Dashboard.vue'
import Bookings from './views/Bookings'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/login',
      name: 'login',
      meta: {
        layout: 'login'
      },
      component: Login
    },
    {
      path: '/',
      name: 'home',
      component: Dashboard
    },
    {
      path: '/bookings',
      name: 'bookings',
      component: Bookings
    }
  ]
})

router.beforeEach((to, from, next) => {
  const token = storage.get('token')
  if (token && !store.state.auth.token) {
    store.commit('auth/setAuthToken', token)
  }

  next()
})

export default router

And here is my store bookings module:

import api from '@/api/bookings'
import router from '@/router'

const state = {
  bookings: [],
  lastAdded: null,
  lastEdited: null,
  errors: {
    get: null,
    add: null,
    edit: null,
    getById: null
  },
  booking: {}
}

export const getters = {
  booking: state => {
    return state.booking
  }
}

export const actions = {
  async getAll ({ commit }) {
    try {
      const response = await api.getAll()
      commit('SET_BOOKINGS', response.data)
    } catch (e) {
      commit('SET_ERROR_FOR_GET', e)
    }
  },

  async create ({ commit, state }, { booking }) {
    try {
      const response = await api.create(booking)
      commit('SET_LAST_CREATED', response.data)
      router.push({ name: 'bookings' })
    } catch (e) {
      commit('SET_ERROR_FOR_CREATE', e)
    }
  },

  async getById ({ commit, state }, { id }) {
    try {
      const response = await api.getById(id)
      commit('SET_BOOKING', response.data)
    } catch (e) {
      commit('SET_ERROR_FOR_GET_BY_ID', e)
    }
  }
}

export const mutations = {
  SET_VEHICLES (state, vehicles) {
    state.all = vehicles
  },
  SET_ERROR_FOR_GET (state, error) {
    state.errors.get = error
  },
  SET_LAST_CREATED (state, customer) {
    state.lastAdded = customer
  },
  SET_ERROR_FOR_CREATE (state, error) {
    state.errors.add = error
  },
  SET_BOOKING (state, vehicle) {
    state.vehicle = vehicle
  },
  SET_ERROR_FOR_GET_BY_ID (state, error) {
    state.errors.getById = error
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

And here is my test:

import chai from 'chai'
import sinon from 'sinon'
import sinonChai from 'sinon-chai'
import bookingsStore from '@/store/modules/bookings'
import api from '@/api/bookings'
// import router from '@/router'
import { stubBooking } from '../stubs/stubs'

chai.use(sinonChai)
const expect = chai.expect

const { getters, actions, mutations } = bookingsStore

// test getters
describe('getters', () => {
  describe('booking', () => {
    it('should return booking from state', () => {
      const state = {
        booking: {}
      }

      const actual = getters.booking(state)

      expect(actual).to.deep.equal(state.booking)
    })
  })
})

// test actions
describe('actions', () => {

  describe('create', () => {
    let apiStub
    let routerStub

    beforeEach(() => {
      apiStub = sinon.stub(api, 'create')
      routerStub = sinon.stub(router, 'push')
    })

    afterEach(() => {
      apiStub.restore()
      routerStub.restore()
    })

    it('create success', async () => {
      const commit = sinon.spy()
      const state = {}

      apiStub.resolves({
        data: stubBooking
      })

      await actions.create({ commit, state }, { stubBooking })

      expect(commit.args).to.deep.equal([
        ['SET_LAST_CREATED', stubBooking]
      ])

      expect(router.push).to.have.been.called
    })
  })
})

So as you can see, just by having import bookingsStore from '@/store/modules/bookings' in my test, the error occurs. If I remove this, then the tests run properly.

Answer 1

I had the same problem, where the store remained undefined when imported into router.

Eventually I opted for using the router instance itself to access the store:

router.beforeEach((to, from, next) => {
  console.log('authenticated?', router.app.$store.getters['auth/isAuthenticated'])

// ...

})

Notice that I'm using Namespaced stores, so that might be the issue. Regardless, I quite like this solution.