現象
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