[Vue warn]: Unknown custom element: <nuxt-link> - When running jest unit tests [Vue warn]: Unknown custom element: <nuxt-link> - When running jest unit tests vue.js vue.js

[Vue warn]: Unknown custom element: <nuxt-link> - When running jest unit tests


This is how I was able to get rid of the annoying warning:

Include RouterLinkStub, eg.:

import { shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils';

Map NuxtLink stub to RouterLinkStub

const wrapper = shallowMount(TestItem, {  ...  stubs: {    NuxtLink: RouterLinkStub  }})

And in case you were checking nuxt-link text or something, change:

const link = wrapper.find('nuxt-link');

to

const link = wrapper.find(RouterLinkStub);

Found this gold on https://onigra.github.io/blog/2018/03/19/vue-test-utils-router-link-stub/

Good thing you don't need to know japanese to read code...


Although the answers provided could work. What I ended up using was based on this guide

const wrapper = mount(TestItem, {  propsData: { item },  localVue,  store,  stubs: {    NuxtLink: true,    // Any other component that you want stubbed  },});


I managed to get it working using this workaround for Storybook:

import { mount, createLocalVue } from '@vue/test-utils'import Component from '@/components/Component.vue'const localVue = createLocalVue()localVue.component('nuxt-link', {  props:   ['to'],  template: '<a href="#"><slot>NuxtLink</slot></a>',})describe('Test Component', () => {    const wrapper = mount(Component, {      stubs: ['nuxt-link'],      localVue    })})