Closed
Description
Version
1.0.0-beta.25
Steps to reproduce
Component Test.js
, which uses another component with router-link
inside:
import Vue from 'vue'
import Component from 'vue-class-component'
const Card = Component(class Card extends Vue {
render () {
return <router-link to='test'>Test</router-link>
}
})
export default {
render () {
return <Card />
}
}
Given the following test:
// @flow
/* eslint-env jest */
import { mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
import VueRouter from 'vue-router'
import Test from './Offices'
const localVue = createLocalVue()
localVue.use(VueRouter)
describe('Test.js', () => {
it('should render with a stub', () => expect(mount(Test , {
localVue,
stubs: { 'router-link': RouterLinkStub }
}).element).toBeDefined())
it('should render with the router', () => {
expect(mount(Test , {
localVue
}).element).toBeDefined()
})
})
What is expected?
In both test cases router-link
in OfficeCard
should be stubbed and tests should pass without errors.
What is actually happening?
Instead, the following error will be logged to the console for both cases:
[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
The issue is definitely related to the vue-class-component
since the following code will pass without errors:
import Vue from 'vue'
import Component from 'vue-class-component'
const Card = {
render () {
return <router-link to='test'>Test</router-link>
}
}
export default {
render () {
return <Card />
}
}
I assume it is because it directly extends Vue
which prevents test-utils
from effectively stubbing underlying components.