ひびのログ

日々ではないけどログを出力していくブログ

@vue/test-utils で「<Component name> has been modified to ensure it has the correct instance properties」と言われた時

前置き

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"
}

エラー内容

f:id:tee-talog:20190807045425p:plain

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 なので、他の警告ログ等が表示されないことはなさそうなのが救いですね。

参考

cloudpack.media