Webpack: Problem with tests and vue-router throwing warnings

[doman412]

While running the tests, I'm getting a warning, followed by a stack trace:

[Vue warn]: Error in render function: "TypeError: undefined is not an object (evaluating 'router.resolve')"

found in

---> <RouterLink>
       <Root>'

to reproduce this you can simply
vue init webpack project-name
pressing enter for all of the prompts

then, in Hello.vue, append this li to the first ul:
<li><router-link :to="{'name': 'foo'}">foo</router-link></li>

then, npm run test and you should see a vue warning and a stack trace printed out.

I can push up a functioning repro if needed but I thought this was simple enough.

[JohnnyCrazy]

So I guess this happens because there is no router object on the vue instance, which is injected in main.js. However, that file is not in the test-context. Did you find a way around it yet @doman412?

[Thavaprakash]

I too getting same warning, please help me to figure it out.

[codeslubber]

Also getting this.

[shailendher]

Hi,

Perhaps importing the router component will help here?

Here's what I tried:

In Hello.vue:
<li><router-link :to="{'name': ''}">foo</router-link></li>

And Hello.spec.js

import Vue from 'vue'
import Hello from '@/components/Hello'
import router from '@/router'

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello)
    const vm = new Constructor({router}).$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

Here is the link for more details: https://forum-archive.vuejs.org/topic/3929/how-to-unit-test-a-router-hook

I'm still a beginner at Vue.js, so take all this with a grain of salt.

[jak-hammond]

I've managed to resolve the warning, I'm not 100% sure why this works as inside the router it's already calling Vue.use(VueRouter) although maybe it's due to extending rather than newing inside the tests. Either way, after importing BOTH router and Vue Router, the sample test below ran for me fine.

  it('Renders correct subtitle', () => {
    Vue.use(VueRouter)
    const Constructor = Vue.extend(FullPageHero)
    const vm = new Constructor({
      router,
      propsData: {
        title: '',
        subtitle: 'TEST'
      }
    }).$mount()
    expect(vm.$el.querySelector('.subtitle').textContent.trim())
      .to.equal('TEST')
  })

[philngo]

If you're using the vue-test-utils package (in beta at time of writing), their suggestion is to "create a localVue, and install Vue Router on that":

import { createLocalVue } from 'vue-test-utils'
import VueRouter from 'vue-router'
const localVue = createLocalVue()

localVue.use(VueRouter)

shallow(Component, {
  localVue
})

or to stub the router-link component

import { shallow } from 'vue-test-utils'

shallow(Component, {
  stubs: ['router-link']
})

[LinusBorg]

We will re-write the testing story soon, vue-test-utils will be added to this template and we will switch the test runner to jest.

I will close this for now, But rest assured that the upcoming changes will cover this better.