Error while executing tests in VueJS: fuzzy vue-router error during route navigation

Question

Error while executing tests in VueJS: fuzzy vue-router error during route navigation

I keep getting this warning in my unit tests whenever I ever have a router component in my template:

I raised the ticket about this to Unknown Custom Item and I tried the same but no luck. Just wondering if anyone knew a little more about this error?

FinalCountdown.html

<div id="c-final-countdown">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- <router-link> will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
</div>

FinalCountdown.spec.js

import Vue from 'vue'
import router from '../../router'
import FinalCountdown from 'src/components/workflow/FinalCountdown'

describe('workflow/FinalCoundDown component.'), () => {
  const getComponent = (date) => {
    let vm = new Vue({
      template: '<div><final-countdown ref="component"></final-countdown></div>',
      components: {
        FinalCountdown
      }
    })
    return vm
  }

  it('Should render correctly with a date in the future.', () => {
    const tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
    const vm = getComponent().$mount()
    const component = vm.$refs.component

    expect(vm.$el).toBeTruthy()
    console.log(vm.$el) // <div><!----></div>
  })
}

Our assertion fails because we need to provide an instance with an vm

instance VueRouter

. Thus, getComponent

it becomes:

  const getComponent = (date) => {
    Vue.use(vueRouter)
    const routes = { ... };
    const router = new VueRouter({ routes })
    let vm = new Vue({
      router,
      template: '<div><final-countdown ref="component"></final-countdown></div>',
      components: {
        FinalCountdown
      }
    })
    return vm
  }