Vue + Vuetify + Jestでの エラー

知人からの要望を受けてVue.js+VuetifyでWebアプリを作成しはじめました。せっかくなのでJestを使ってテスト駆動開発を試そうとしたのですが、慣れないことなので、いろいろな壁にぶつかります。

Multiple instances

これらJestとVuetifyを同時に動かそうとしたときに以下のようなエラーに遭遇しました。

    console.error node_modules/vuetify/dist/vuetify.js:35407
      [Vuetify] Multiple instances of Vue detected
      See https://github.com/vuetifyjs/vuetify/issues/4068

      If you're seeing "$attrs is readonly", it's caused by this

少し調べてみましたが同様の現象に遭遇している人も多いようでした。

今回は「setupTestFrameworkScriptFileを設定することでjestのセットアップファイルでVuetifyを読み込む」ことで対処しました。

  • testsフォルダの直下にjest-setup.jsファイルを用意して以下のように記述
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify)
Vue.config.productionTip = false;
  • jest.config.jsonに以下の行を追加
    setupTestFrameworkScriptFile: "/tests/jest-setup.js"
    jest.config.jsonを使わずにpackage.jsonを使ってjestの設定を行っているプロジェクトでは、以下のように設定項目を追加しました。
    "jest": {
      "setupTestFrameworkScriptFile": "<rootDir>/tests/jest-setup.js"
    }  
    

これが最善の対処方法か自信はありませんが、とりあえずWarningが消えてテストがパスするようになったので作業を継続しようと思います。Feature Requestという記事があったので将来はこのような現象はなくなるかもしれません。備忘録として記事をアップしておきます。

PS:
setupTestFrameworkScriptFileはdeprecatedになるのでsetupFilesAfterEnvに置き換えるようにという記事を見つけました。
https://github.com/mozilla/addons-frontend/issues/7506
そのうち修正が必要になると思います。

TypeError: Cannot read property 't' of undefined

tというプロパティは使っていないし全く思い当たる節がありません。callstackをたどると

at VueComponent.listData (C:\FutureCoders\geisha-net\node_modules\vuetify\dist\webpack:\Vuetify\src\components\VSelect\VSelect.ts:193:42)

この部分をみてみると以下のようになっていました。

        props: {
          action: this.multiple,
          color: this.itemColor,
          dense: this.dense,
          hideSelected: this.hideSelected,
          items: this.virtualizedItems,
          noDataText: this.$vuetify.lang.t(this.noDataText),

どうも、この$vuetify.langがundefinedになっているらしい、ということがわかりました。
数時間解決策を探しつつ、Try&Errorを繰り返すも、良い方法が見つからず、、、

今回は以下のようにテスト対象となるComponentに直接プロパティを追加して回避することにしました。

    created() {
      this.$vuetify.lang = {
        t : () => {},
      }
      this.$vuetify.theme = { dark : false}
    },  

本来あるべき対処方法でないことは重々承知しています。良い方法をご存知の方がいらっしゃればご教授いただければ嬉しいです。

参考URL