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 (テストを実行) をクリックします。
Jest テストファイル内のすべてのテストケースを実行するには、エディタウィンドウの右上隅にある、メニューバーの再生アイコンをクリックします。
Jest テストのデバッグ
個々の Jest テストケースをデバッグするには、.test.js ファイルに移動し、Jest テストケースの定義の上にある Debug Test (テストをデバッグ) をクリックします。
Jest テストファイル内のすべてのテストケースをデバッグするには、エディタウィンドウの右上隅にあるメニューバーのデバッグアイコンをクリックします。
VS Code の組み込みデバッガが起動し、VS Code でテストをデバッグすることができます。ブレークポイントを設定したり、デバッグアクションでデバッグセッションを制御したり、デバッグコンソールを使用して式を評価したりすることができます。
Jest テストの監視
Jest のテストファイルを監視するには、エディタウィンドウの右上隅にあるメニューバーの目のアイコンをクリックします。アイコンを切り替えると、監視を停止します。Jest テストファイルをウォッチしているときに、Jest テストファイルまたは Jest テストファイルがテスト対象としている LWC の JavaScript ファイルを編集すると、テストファイルが再実行されます。
