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:'