Lightning Web コンポーネントのテスト

Lightning Web コンポーネントのテスト

sfdx-lwc-jest をインストールして、Lightning Web Components 用の Jest テストランナーを準備します。

LWC のテストを探索する

LWC テストサイドバーは、書いたコードのテストを実行するための中心的な場所を提供します。1 つのテストケース、1 つのファイル内のテストケース、またはすべてのテストを実行することができます。また、最後に実行したテストの結果を表示したり、テストから直接対応するコード行に移動することもできます。テストサイドバーにアクセスするには、ビューバーのビーカーアイコン (ホバーテキスト: テスト) をクリックします。このアイコンが表示されない場合、VS Code で開いているプロジェクトがルートディレクトリに sfdx-project.json ファイルを含んでいることを確認してください。

選択したテストを実行するには、LWC テストビューから再生アイコンを表示するためにテストケースもしくはファイルの名前の上にカーソルを置きます。再生アイコン (ホバーテキスト: SFDX: Lightning Web コンポーネントテストケースの実行) をクリックすると、テストケースまたはファイル内のすべてのテストケースが実行されます。ビュー内のすべてのテストを実行するには、LWC テストビューの上部にある大きな再生アイコン (ホバーテキスト: SFDX: Lightning Web Component テストをすべて実行) をクリックします。

テスト結果は緑が合格、赤が不合格、オレンジがスキップされたテストです。

テストファイルやテストケースにジャンプするには、サイドバーのテスト名をクリックします。

テスト結果をクリアするには、サイドバー上部の更新アイコンをクリックします。 (ホバーテキスト: SFDX: Lightning Web Component テストエクスプローラを更新)

ファイル内から Jest テストを実行、デバッグ、監視する

ファイル内のコンテキストアクション、またはエディタウィンドウの右上隅にあるメニューバーからボタンをクリックすることで、Jest ユニットテストを実行またはデバッグすることができます。ターミナルパネルでテスト結果を表示します。

Jest テストの実行

個々の Jest テストケースを実行するには、.test.js ファイルに移動し、Jest テストケースの定義の上に表示される Run Test (テストを実行) をクリックします。

テストを実行 コードレンズを使用した LWC テストの実行

Jest テストファイル内のすべてのテストケースを実行するには、エディタウィンドウの右上隅にある、メニューバーの再生アイコンをクリックします。

Jest テストのデバッグ

個々の Jest テストケースをデバッグするには、.test.js ファイルに移動し、Jest テストケースの定義の上にある Debug Test (テストをデバッグ) をクリックします。

テストをデバッグ コードレンズを使用した LWC テストのデバッグ

Jest テストファイル内のすべてのテストケースをデバッグするには、エディタウィンドウの右上隅にあるメニューバーのデバッグアイコンをクリックします。

VS Code の組み込みデバッガが起動し、VS Code でテストをデバッグすることができます。ブレークポイントを設定したり、デバッグアクションでデバッグセッションを制御したり、デバッグコンソールを使用して式を評価したりすることができます。

Jest テストの監視

Jest のテストファイルを監視するには、エディタウィンドウの右上隅にあるメニューバーの目のアイコンをクリックします。アイコンを切り替えると、監視を停止します。Jest テストファイルをウォッチしているときに、Jest テストファイルまたは Jest テストファイルがテスト対象としている LWC の JavaScript ファイルを編集すると、テストファイルが再実行されます。

メニューバーボタンを使用した LWC テストの監視

Feedback or Bugs | Edit this Article