Vue ユニットテストに推奨されるプラグインと使用例

フレーム

ユニットテストの推奨事項は一般にフレームワークに依存しないため、以下はアプリケーションのユニットテストツールを評価するときに考慮すべき基本的なガイドラインです。

最高レベルのエラー報告

テストが失敗したときに役立つエラーメッセージを提供することは、ユニットテストフレームワークにとって非常に重要です。これはアサーションライブラリの仕事です。高品質のエラーメッセージを含むアサーションを使用すると、問題のデバッグに必要な時間を最小限に抑えることができます。アサーションライブラリは、単にどのテストが失敗したかを伝えるだけでなく、予想される結果と実際に得られた結果など、追加のコンテキストとテストが失敗した理由も提供する必要があります。

Jest などの一部のユニットテストフレームワークにはアサーションライブラリが含まれています。 Mocha などの他のツールでは、別のアサーションライブラリ (通常は Chai) をインストールする必要があります。

活発なコミュニティとチーム

主要なユニットテストフレームワークはオープンソースであるため、テストを長期にわたって維持し、プロジェクト自体がアクティブな状態を維持することを目指すチームにとって、アクティブなコミュニティを持つことは非常に重要です。さらに、アクティブなコミュニティが、問題が発生するたびに追加のサポートを提供してくれるという利点もあります。エコシステムには多くのツールがありますが、ここでは Vue エコシステムでよく使用されるユニットテストツールをいくつか紹介します。

冗談

Jest はシンプルさを重視した JavaScript テストフレームワークです。ユニークな機能として、テスト用のスナップショットを生成し、アプリケーションユニットを検証する別の方法を提供する機能があります。

モカ

柔軟性に重点を置いた JavaScript テストフレームワークです。柔軟性が高いため、リスニング (Sinon など) やアサーション (Chai など) などの他の一般的な機能を満たすために、さまざまなライブラリを選択できます。 Mocha のもう一つのユニークな機能は、Node.js だけでなくブラウザでもテストを実行できることです。

推奨プラグイン

Vue テストライブラリ (@testing-library/vue)

Vue テストライブラリは、実装の詳細に依存せずにコンポーネントのテストに重点を置いたツールセットです。アクセシビリティを考慮して設計されており、そのアプローチによりリファクタリングも簡単になります。

基本原則は、ソフトウェアの使用方法に似たテストが多いほど、信頼性が高くなるということです。

Vue テストユーティリティ

Vue Test Utils は、ユーザーに Vue 固有の API へのアクセスを提供するために作成された公式の低レベルコンポーネントテストライブラリです。 Vue アプリケーションのテストを初めて行う場合は、Vue Test Utils を抽象化した Vue Testing Library を使用することをお勧めします。このライブラリには、非常に詳細なAPIドキュメントがあります。Vue Test Utils

例

<テンプレート>
  <div>
    <input v-model="ユーザー名">
    <div
      v-if="エラー"
      クラス="エラー"
    >
      {{ エラー }}
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'こんにちは',
  データ （） {
    戻る {
      ユーザー名: ''
    }
  },

  計算: {
    エラー （） {
      this.username.trim().length < 7 を返します
        ? 「より長いユーザー名を入力してください」
        : ''
    }
  }
}
</スクリプト>

以上が、vue ユニットテストにおすすめのプラグインと使用例の詳細です。vue ユニットテストの詳細については、123WORDPRESS.COM 内の他の関連記事もぜひご覧ください。

以下もご興味があるかもしれません: