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

# エラー
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コンポーネントを認識しなかったみたい。

# ソースコード

```vue: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>
```

```javascript: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のセットアップファイルに追記。

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

```javascript: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; // 追記
```

# 参考

https://vue-test-utils.vuejs.org/ja/guides/using-with-vue-router.html

https://stackoverflow.com/questions/49665571/vue-warn-unknown-custom-element-nuxt-link-when-running-jest-unit-tests