Error when running tests in VueJS: vue-router uncaught error during route navigation

时间:2017-06-15 10:12:46

标签: javascript vuejs2 vue-router

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

I've raised a ticket about this before Unknown custom element and I've tried the same things but with no luck. Just wondered if anyone knew a bit 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 vm instance with VueRouter instance. So then getComponent 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
  }

And then we can see the component mounting but I get the warning error. Hope that all makes sense :D

WARN LOG: '[vue-router] uncaught error during route navigation:'

0 个答案:

没有答案