Vue-cli: [Vue warn]: Unknown custom element: <router-link>

Created on 15 May 2019  ·  6Comments  ·  Source: vuejs/vue-cli

Version

3.7.0

Reproduction link

https://github.com/unixc3t/recordstore-front

Environment info

System:
    OS: Linux 4.19 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
  Binaries:
    Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
    Yarn: 1.12.3 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 66.0.5
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.7.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.7.0 
    @vue/cli-plugin-babel: ^3.7.0 => 3.7.0 
    @vue/cli-plugin-e2e-nightwatch: ^3.7.0 => 3.7.0 
    @vue/cli-plugin-eslint: ^3.7.0 => 3.7.0 
    @vue/cli-plugin-unit-mocha: ^3.7.0 => 3.7.0 
    @vue/cli-service: ^3.7.0 => 3.7.0 
    @vue/cli-shared-utils:  3.7.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/test-utils: ^1.0.0-beta.29 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.2 
    vue: ^2.6.10 => 2.6.10 
    vue-axios: ^2.1.4 => 2.1.4 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-router: ^3.0.3 => 3.0.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.7.0

Steps to reproduce

git clone [email protected]:unixc3t/recordstore-front.git

find the Signup.spec.js

remove import Vue from 'vue'
remove Vue.config.ignoredElements = ['router-link']

npm run test:unit ./tests/unit/components/Signup.spec.js

What is expected?

I hope to don't show the next waring:

What is actually happening?

always show

when I test the signup component

in the component, I use the router-link component

  <div class="my-4">
          <router-link to="/signin" class="link link-gray-900">Sign In</router-link>
        </div>

when I run npm run test:unit ./tests/unit/components/Signup.spec.js
always show the warns:
md5-5df690bd3b6afee254990bcc1c4060e8

Most helpful comment

@sunlili810 use this

shallowMount(Component, {
  stubs: ['router-link', 'router-view']
})

All 6 comments

install vue-router, review the official documentation for vue-router here.

@sunlili810
I had install the vue-router, the warn show when I run the unit test
your mean reinstall?

I had the same problem. I installed vue-router and import it like this:
import Router from 'vue-router'
Vue.use(Router);
The problem of has been solved.

@sunlili810 thank you ,as your said,It's work, but I don't know if this may be appropriate,
I don't know if this is a bug, I think it should not import vue again .

@sunlili810 use this

shallowMount(Component, {
  stubs: ['router-link', 'router-view']
})
Was this page helpful?
0 / 5 - 0 ratings