前置き
Vue.js + JavaScript 環境に TypeScript を導入しようとしたときの話です。 コンポーネントを TypeScript 化してコンパイルはでき、テスト(Jest)が通るか確かめたときの話です。
やったこと
子コンポーネント(以下 ChildComponent.vue)を TypeScript に書き換えて、親コンポーネント(以下 ParentComponent)は JavaScript のままです (vue-property-decorator を使っています)。
バージョン
// package.json { "vue-jest": "^2.5.0", "@types/vue": "^2.0.0", "@vue/test-utils": "^1.0.0-beta.20", "vue": "^2.5.16", "vue-loader": "^14.2.3", "vue-property-decorator": "^8.2.1", "jest": "^22.4.4", "ts-jest": "^24.0.2", "ts-loader": "^6.0.4" }
エラー内容
console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:15 [vue-test-utils]: an extended child component <ChildComponent> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.
なぜこのメッセージが表示されるか
わかりません!!!!
vue-loader のバージョンの可能性
解消方法
このメッセージが出ないように、@vue/test-utils の設定を追加します。
import { config } from '@vue/test-utils' config.logModifiedComponents = false
参考 URL の方はメッセージ内にこの内容が表示されているようでしたが、今回は書いてありませんでした。 これが @vue/test-utils のバージョンなのか、他のモジュールのバージョンなのかはわかりません。
(こいついっつもわかってないな)
この設定を preprocessor とかに入れておけば、毎回設定する必要もなく楽だと思います。
懸念
ログを抑制する系のコンフィグのため、もともとの原因が解決されていないのが気になります。
コンフィグ名が modified components なので、他の警告ログ等が表示されないことはなさそうなのが救いですね。