Vuetify

ショップ

企業向け

ユニットテストはアプリケーション開発の重要な部分(そして時々無視される)部分です。ユニットテストは私たちのプロセスとワークフローを保護し、プロジェクトの最も重要な部分を偶発的なミスや見落としから守ることを保証します。このためVueは vue-test-utils と呼ばれる、テストユーティリティを持っています。Vueコンポーネントと対話するための便利な機能を提供し、多くの一般的なテストランナーと連携します。

Vue CLI でテストランナーをセットアップする方法に関する情報は、 公式ドキュメント にあります。 また、Vue CLI は次のテストランナー向けのリポジトリを開始しました。

Typescriptを適切に利用するために、VuetifyコンポーネントはVueオブジェクトを拡張します。 これには、上記のアラートに記載されている 問題の原因 の可能性があります。 localVueインスタンス を使用する代わりに、ユニットテストセットアップファイルでVuetifyをグローバルにインストールする必要があります。 これはテストランナーによって異なります。 セットアップファイルに関する適切なドキュメントを必ず参照してください。

Vuetifyでのユニットテストの作成は、 localVue インスタンスでVuetifyオブジェクトを使用し、インスタンスをマウント関数オプションに渡すという点で vuex および vue-router に似ています。

アプリケーションで見つかる可能性のあるサンプルテストユースケースを作成しましょう。

上記の例では、title propと、クリックされたときにカスタムイベントを発生する v-btn を持つカスタムコンポーネントを作成しました。ここで、この動作が正常に機能することを確認するテストを作成し、今後の変更を通じて引き続き機能するようにします。以下の例は、 Jest テストランナーを使用して作成されています。

テストを作成するとき、同じことを何度も繰り返すことがよくあります。このような場合、ヘルパー関数を作成して、個々のテストの重複を減らすことは有益です。コードは DRY原則 を適用します。

ユニットテストで記述された最も一般的な複製コードの1つは、マウント関数です。これは、実行ごとに再利用可能な関数に簡単に圧縮できます。

Vuetifyのコンポーネントの多くは、グローバルな $vuetify オブジェクトを利用して、デフォルトのテキストやブレークポイント情報などの設定を導き出します。これらのコンポーネントをテストするとき、 vue-test-utils にモックオブジェクトを提供する必要があります。

langapplication など 使用されているサービスのみをスタブする 必要があることに留意してください。 これらのサービスを手動でインポートすることもできます。

利用可能なサービスは以下のとおりです。

Vuetifyは、コンポーネントから関連するHTML要素に data-* 属性を渡します。これにより、E2Eテストフレームワークはそれらの要素を簡単に見つけることができます。

たとえば、Cypress は、要素を簡単にターゲティングできるようにするために data-cy 属性を追加することを推奨しています。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!