4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.