Using Vuex and Vue router with Cypress Vue component testing

[JasonFairchild]

I feel like this must be a common use case, but I'm still having trouble finding documentation on how this should work. I've looked a lot through the readme here and examples https://github.com/cypress-io/cypress/tree/master/npm/vue#full-examples Sorry if the answer is obvious, I'm still very new to Vue and even Cypress component testing. Vue component testing was working with very basic Vue components, but when we added Vuex and router, it doesn't recognize them. I'm assuming it can be handled with mount options or some sort of Webpack config, but exactly how to do so is what I haven't been able to find. Here is an example of what I mean.

The store is included in main.ts when the new Vue instance is created and mounted, but Cypress seems to skip this for component testing through webpack. So what is the best way to resolve this?

This is also our cypress index.js, if that could help. Looks like we are using some generic webpack config straight from the Vue CLI service.

@bahmutov or @JessicaSachs could either of you help with this?

[JasonFairchild]

Ok, so with a little help from another on my team, we found that this at least gets the test to run and finish. It is simple, and fine with me, I just wanted to make sure: is this bad practice for any reason or is there a better way still? Thanks!

[JasonFairchild]

https://github.com/cypress-io/cypress/tree/master/npm/vue/cypress/component I found this finally. I think we will be able to draw from the vuex and router examples in here as a better approach. I think highlighting these examples in the readme could be helpful (or more clearly, but I couldnt find any reference to them in the readme). Feel like they are that fundamental at least. Just my thought.

[JasonFairchild]

This could be closed. I can't figure out how to, if I can =/