エラー

Nuxt.js + Jest でユニットテストを作成していると、以下のようなエラーが起きた。

[Vue warn]: Unknown custom element: <nuxt-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Jestがnuxt linkコンポーネントを認識しなかったみたい。

ソースコード

Header.vue

<template>
  <div class="header">
    <v-app-bar fixed app>
      <nuxt-link to="/">
        <v-toolbar-title class="title" v-text="title" />
      </nuxt-link>
      <v-spacer />
    </v-app-bar>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Header extends Vue {
  readonly title: string = 'money.com'
}
</script>

<style scoped>
a {
  text-decoration: none;
}
.title {
 color: #fff;
}
</style>

Header.spec.js

import { shallowMount } from '@vue/test-utils'
import Header from '@/components/Header'

describe('Header', () => {
  let wrapper
  const title = 'money.com'

  beforeEach(() => {
    wrapper = shallowMount(Header)
  })

  test('is a Vue instance', () => {
    expect(wrapper.vm).toBeTruthy()
  })

  test('render app title', () => {
    expect(wrapper.text()).toMatch(title)
  })

  test('instance has title option', () => {
    expect(wrapper.vm.title).toBe(title)
  })
})

package.json

{
  "name": "money.com",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "lintfix": "yarn lint:js --fix",
    "test": "jest"
  },
  "dependencies": {
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.6.1",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/vuetify": "^1.12.3",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.4.4",
    "eslint": "^8.4.1",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "^27.4.4",
    "ts-jest": "^27.1.1",
    "vue-class-component": "^7.2.6",
    "vue-jest": "^3.0.4",
    "vue-property-decorator": "^9.1.2"
  }
}

解決方法

方法１　Mountオプションを使用する。

test/Header.spec.js

import { shallowMount, RouterLinkStub } from '@vue/test-utils' // 追記
import Header from '@/components/Header'

describe('Header', () => {
  let wrapper
  const title = 'money.com'

  beforeEach(() => {
    wrapper = shallowMount(Header, {
      stubs: {
        NuxtLink: RouterLinkStub // 追記
      }
    })
  })

  test('is a Vue instance', () => {
    expect(wrapper.vm).toBeTruthy()
  })

  test('render app title', () => {
    expect(wrapper.text()).toMatch(title)
  })

  test('instance has title option', () => {
    expect(wrapper.vm.title).toBe(title)
  })
})

方法2　jestのセットアップファイルに追記。

最終的には、これがいいと思った。

test/setup.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import { RouterLinkStub, config } from '@vue/test-utils' // 追記

Vue.use(Vuetify)

// Mock <nuxt-link />
config.stubs['nuxt-link'] = RouterLinkStub; // 追記

参考