Jest で “Unknown custom element” エラー

Vuetifyを使っているコンポーネントのテストをJestで実行した際、「Unknown custom element」のワーニングが出る場合の対処法です。

テスト関連のフォルダに tests/setup.js として下記ファイルを作成します。

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

次に、jest.config.js に setupFiles プロパティで先程作ったファイルを読み込ませます。

module.exports = {
  setupFiles: ['<rootDir>/tests/setup.js'],
  ...
}

これで再度テストを実行するとワーニングが消えているかと思います。

参考

Unit testing — Vuetify

Learn how to create unit tests with vue-test-utils and Vuetify components in your Vue application.

vuetifyjs.com