Vue.jsのJestのテストがTypeError: Cannot read property ‘component’ of undefinedで失敗するときは

コンポーネントが読み込まれていないため、失敗しています。

TypeError: Cannot read property ‘component’ of undefined

テストじゃなければ動くけど、テストの場合だけエラーが出る時は、プラグインやUIフレームワークの初回実行時に読み込むコンポーネントがテストの時に正しく読み込めていない場合に発生している可能性が高いです。

実例 VuetifyのVIcon

Vuetifyを手順通りに入れて、いざテスト！と実行するとアイコンを使用しているコンポーネントが読み込めないと、エラーが発生します。

[Vue warn]: Error in render: "TypeError: Cannot read property 'component' of undefined"

    found in

    --->

VuetifyではアイコンはMaterial Design Iconsが使用されます。
インストール時にデフォルトでCDNからアプリケーションのindex.htmlで読み込まれます。
＝コンポーネント単体のテストでは読み込まれません。

CDNではなくパッケージマネージャーでインストールした上で、Vuetifyを生成する時に読み込みます。

npm install @mdi/font -D
　

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
})

参考：Icon Fonts – Vuetify