Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unit tests do not run when importing router into store and store into router #1509

Closed
djam90 opened this Issue Feb 14, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@djam90
Copy link

djam90 commented Feb 14, 2019

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

This comment has been minimized.

Copy link
Member

LinusBorg commented Feb 23, 2019

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.

@LinusBorg LinusBorg closed this Feb 23, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.