Angular —単体テストでJasmineカスタムマッチャーを追加する方法

JavascriptとTypescriptの両方で

UnsplashのHosea Georgesonによる写真

JasmineはBDDフレームワークであり、単体テスト用の多くの組み込みマッチャーを提供します。ただし、すべてのテストシナリオを容易にするため、またはより読みやすいテストケースを作成するために、独自のカスタムマッチャーを作成する必要がある場合があります。

この投稿では、ジャスミンマッチャーとその使用方法をJavascriptとTypescriptの両方で説明します。

  • マッチャーとは
  • 組み込みのマッチャーとその使用方法
  • カスタムMathersとそれらの定義方法
  • JavaScriptのサンプルプロジェクト
  • Typescriptのサンプルプロジェクト
  • Angularでカスタムマッチャーを定義する方法
  • 概要

マッチャーとは

マッチャーは、テスト仕様で期待される結果と実際の結果を実際に比較するための比較関数に他なりません。

以下は、Matcherの1つの例です。行番号4を見ると、toBeはマッチャーであり、常にexpectとともに使用されます。実際の結果と期待される結果を比較し、ブール値を返します。

組み込みのマッチャーとその使用方法

Jasmineは非常に多くの組み込みマッチャーを提供します。ここでそれらのいくつかを見てみましょう。

VSCodeによるマッチャーの提案

これらを使用する方法を次に示します。

カスタムMathersとそれらの定義方法

ほとんどの場合、ジャスミンのこれらの組み込みマッチャーで十分です。ただし、カスタムマッチャーを作成する必要がある場合があります。

JasmineはaddMatchersと呼ばれる関数を提供するため、カスタム関数またはユーザー定義関数でマッチャーを拡張できます。これをbeforeEach関数に配置する必要があります。

ここでカスタムマッチャーの定義方法を見てみましょう。以下に見ることができるように、フィールドpassとmessageを持つ結果オブジェクトと比較関数を返すtoBeOlderThanを定義しています。テストが失敗した場合、ここで指定したメッセージはすべてコンソールに表示されます。

JavaScriptのサンプルプロジェクト

この記事のレポを作成しました。これを使用してフォローできます。それを使用するには、上記のリンクに移動して、クローンを作成してインストールします。

//リポジトリを複製します
git clone https://github.com/bbachi/jasmine-tests.git
//依存関係をインストールしてテストします
npmインストール
npmテスト

メソッドgetName、getAge、setName、およびsetAgeを持つ人がいます。

カスタムマッチャーtoBeOlderThan、toBeLastNameEqualTo、toBeFirstNameEqualToで上記のクラスをテストします。これらのカスタムマッチャーを以下のような個別のオブジェクトで定義し、このオブジェクトをbeforeEach関数に追加しましょう。

上記のカスタムマッチャーオブジェクトをaddMatchersに追加し、プロジェクトをテストする残りのファイルを次に示します。

npm testを実行したときの出力は次のとおりです。

テスト出力

Typescriptのサンプルプロジェクト

従うのに使用できるtypescriptプロジェクトのレポを書きました。それを使用するには、上記のリンクに移動して、クローンを作成してインストールします。

//プロジェクトを複製します
git clone https://github.com/bbachi/jasmine-tests-typescript.git
//依存関係をインストールしてテストを実行します
npmインストール
npmテスト

メソッドgetName、getAge、setName、setAgeを持つtypescriptのpersonクラスがあります

typescriptにあるため、次の型定義をインストールする必要があります

「@ types / jasmine」:「^ 3.3.12」、
「@ types / node」:「^ 12.0.0」、
「ts-node」:「^ 8.1.0」、
「typescript」:「^ 3.4.5」

src / test-helpersの下の別のファイルにあるtypescriptのカスタムメソッドを次に示します。

これらのカスタムマッチャーは拡張されているため、ジャスミンのタイプ定義ファイルには存在せず、typescriptコンパイラーが認識するために、これらのカスタムマッチャーのタイプ定義を定義する必要があります。

行番号4から以下のように、これらをjasmine名前空間で宣言できます。

npm testを実行したときの出力は次のとおりです。

テスト出力

Angularでカスタムマッチャーを定義する方法

Angularでは、同じ方法でカスタムマッチャーを定義します。すべてのカスタムマッチャーにcustom-matcher.tsを定義し、testingフォルダーの下にある型定義にcustom-matcher.d.tsを定義する必要があります。

カスタムマッチャー用の個別のフォルダー

以下のようなspecファイルにcustom-matcher.tsとcustom-matcher.d.tsの両方をインポートします。

簡潔にするために、以下のファイルから残りのコードをすべて削除しました。

npm testを実行したときの出力は次のとおりです。

テスト出力

概要

  • マッチャーは、実際の結果と期待される結果を比較してブール値を返す比較関数です。
  • Jasmineは、Angularがユニットテストに使用するBDDテストフレームワークです。
  • マッチャーは常にexpectと組み合わせて使用​​する必要があります。
  • Jasmineは、プロジェクトで直接使用できる組み込みのマッチャーを提供します。
  • addMatchers()という関数を使用して、ジャスミンマッチャーを拡張できます。
  • ジャスミンカスタムマッチャーは、javascriptとtypescriptの両方で記述できます。
  • typescriptコンパイラをコンパイルするには、カスタムマッチャー用の型定義ファイルを宣言する必要があります。
  • Jasmine.addMatchers()は、beforeEach()ブロック内で常に使用する必要があります。

資源

  • カスタムマッチャーJavescript Gitリポジトリ
  • カスタムマッチャーTypescript Gitリポジトリ
  • カスタムマッチャーAngular Gitリポジトリ

読んでくれてありがとう。これが便利だと思ったら、拍手して他の人が見つけられるように助けてください。もっと面白い話を聞いてください:)