Vuex: Unit tests do not run when importing router into store and store into router

[djam90]

Version

3.1.0

Reproduction link

https://github.com/djam90/vuex-vue-router-issue

Steps to reproduce

Run npm run test:unit and see the failure. To get the tests to run again, do not import the store into the router and the router into the store.

What is expected?

The tests should run fine and circular imports should work. They DO work in the browser just not in Mocha testing environment.

What is actually happening?

Error as follows:

TypeError: Cannot read property 'getters' of undefined
    at /home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:261:1
    at Array.forEach (<anonymous>)
    at assertRawModule (/home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:260:1)
    at ModuleCollection.register (/home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:186:1)
    at /home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:200:1
    at /home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:75:1
    at Array.forEach (<anonymous>)
    at forEachValue (/home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:75:1)
    at ModuleCollection.register (/home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:199:1)
    at new ModuleCollection (/home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:160:1)
    at new Store (/home/dan/code/vuex-router-issue/dist/webpack:/node_modules/vuex/dist/vuex.esm.js:311:1)

---

My VueX store needs to be able to import the router so it can do routing things like navigate to another page.
My router needs to be able to access state from VueX to determine what to do in a router.beforeEach handler.

I have asked for help on Stack Overflow:
https://stackoverflow.com/questions/54691789/unable-to-import-vuex-store-into-router-and-router-into-store-in-mocha-tests

[LinusBorg]

You created a circular dependency, which will always break like this. It has nothing to do with the tings you import/export (store/router).

You can prevent this by importing one of the two dependencies qith require() in-place:

router.beforeEach(() => {
  const store = require('./store')
  // do stuff with store.
})

My VueX store needs to be able to import the router so it can do routing things like navigate to another page.

Professional opinion: This is definitely not the job of the store. The store actions etc should be oblivious to the routing system.

Depending on the exact use case you might consider implementing these side effects as a store plugin:

https://vuex.vuejs.org/guide/plugins.html

If you need help with that, visit our forum or chat.