建設予定地

当面はやったことの備忘録

Vuetifyを含んだコンポーネントのテスト実行時に出る警告を消す

現象

Jestテスト実行時に出る

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

などの赤字の警告について

テストツール

Vue test Utils, Jest

原因

Vuetifyコンポーネント(<v-col>や <v-btn> )をJestが認識しないため、Unknown custom elementエラーが出る

対処法

package.jsonのscriptsに以下を記述

package.json
 "scripts": {
+    "test": "jest --config jest.config.js"
  }

次に、jest.config.jsで指定した階層(root直下のtestディレクトリ)に以下のファイルを追加

test/jest.setup.js  
import Vue from 'vue'  
import Vuetify from 'vuetify'  
  
Vue.use(Vuetify)  
  

以下のファイルをroot直下に追加

jest.config.js  
module.exports = {  
  setupFiles: ['<rootDir>/test/jest.setup.js'],    // Load Mock setting  
  moduleNameMapper: {  
    '^@/(.*)$': '<rootDir>/$1'  ,
    '^~/(.*)$': '<rootDir>/$1'  
  },    
  transform: {  
    '^.+\\.js$': 'babel-jest',  
    '.*\\.(vue)$': 'vue-jest'  
  },  
  moduleFileExtensions: ['js', 'json', 'vue']  
}  

Vuetifyのようなライブラリを含んだコンポーネントに対するテストは、テストランナーに応じた特別な処置が必要になります。
クリックテストなどでも、Vuetifyのボタンコンポーネントに対するテストを書くにはプラグイン登録が必要になります。

このあたりを参照したいときは、Vuetify公式チュートリアルユニットテストの手法が参考になりそうです。
vuetifyjs.com

参考

vuetifyjs.com qiita.com