Install issue when VueRouter is already used on Vue

[kellym]

Version

1.0.0-beta.11

Reproduction link

https://codesandbox.io/s/p7x5mqkx2q

Steps to reproduce

This likely applies to other libraries, but when VueRouter is already installed on Vue (i.e Vue.use(VueRouter)) and then subsequently used with localVue, it errs with

Error: [vue-router] not installed. Make sure to call `Vue.use(VueRouter)` before creating root instance.

What is expected?

No error.

What is actually happening?

Error: [vue-router] not installed. Make sure to call `Vue.use(VueRouter)` before creating root instance.

---

Adding

VueRouter.install.installed = true

after declaring a localVue instance fixes the issue.

[kellym]

As another reference, this is happening when testing with webpack (and a shall-remain-unnamed other old framework), likely due to the fact that the package is initializing the main app with VueRouter installed, etc.

[LinusBorg]

due to the fact that the package is initializing the main app with VueRouter installed, etc.

Well that doesn't sound like something that should be done in a unit test.

[kellym]

That's not a very classy response to a verified bug of which I spent an hour or more isolating and "formatting" for your issue bot. There should not be an error in using createLocalVue when Vue.use is called in the same file.

[eddyerburgh]

Thanks for the bug report.

We could definitely improve how we handle multiple installs. I'll look into what we should do.

We actually have some code meant to address the issue with vue-router specifically—https://github.com/vuejs/vue-test-utils/blob/dev/src/create-local-vue.js#L35. I'll look into why it's not working and possible solutions.

[LinusBorg]

I'm sorry that my answer what a bit short and snappy, I apologize.

My reply was not meant as an answer or rejection of your issue, but merely as an observation of a bad pattern in general. You are loading a file that can have, and in this instance does have a global side effect on your unit tests. You are starting your whole app within your unit tests, which is not a good idea.

The error message you are seeing is created by vue-router abs plus have to be solved there, if required. Judging that I leave to the maintainer of this repo.

[kellym]

Thanks for looking into it. It's definitely a bad pattern, and one that we're still dealing with due to our transition off Angular.

I've been playing around with the code you referenced, @eddyerburgh, and have yet to find a clean solution. What's strange is that VueRouter even seems to try to verify that Vue is the same Vue that the router was previously installed to...

I'll try to do some more digging as well.

[kellym]

Here's the culprit in core vuejs:
https://github.com/vuejs/vue/blob/049f3171a9d2e97f62c209a4b78a71ec9dae810f/src/core/global-api/use.js#L8

This commit fixes the issue for me, although I really dislike these things being so dependent on Vue's internals:
kellym@961912c#diff-4dcb7576e72c067fba6def9222025466R35

Interestingly enough, the router seems to work fine on localVue and doesn't err if it's declared via Vue.use(VueRouter) and not called at all via localVue.use(VueRouter). Since I don't have any experience with VueRouter < 2.7, I'm not sure the implications of only .useing it one way or the other. (example below)

Vue.use(VueRouter); // comment out this line or the one commented below and it works fine
const localVue = createLocalVue();
// localVue.use(VueRouter);
const router = new VueRouter();
const wrapper = shallow(Component, { localVue, router });

[eddyerburgh]

Great find @kellym 🙂. Are you able to make a PR?

[kellym]

Sure can, I'll try to submit one tomorrow.