Skip to content

Unknown custom element: <router-link> when using mount() #994

Closed
@ArmorDarks

Description

@ArmorDarks

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions