テスト
Visual Studio Codeは、コードのテストを支援する豊富な機能を提供します。プロジェクト内のテストを自動的に検出したり、テストを実行およびデバッグしたり、テストカバレッジの結果を取得したりできます。VS CodeのGitHub Copilotは、プロジェクトのテストフレームワークのセットアップを支援し、テストコードの生成や失敗したテストの修正に役立ちます。
この記事では、VS Codeでテストを開始する方法、人気のあるテスト拡張機能を見つける方法、テスト機能を探求する方法について説明します。また、VS CodeのCopilotがテストをより迅速に記述し、失敗したテストの修正にどのように役立つかについても学びます。
まだCopilotのサブスクリプションをお持ちでない場合は、Copilot無料プランにサインアップすることでCopilotを無料で利用できます。毎月の補完とチャットのやり取りに制限があります。
VS Codeでのテストについて
VS Codeのテストサポートは言語固有であり、インストールしているテスト拡張機能に依存します。言語拡張機能またはスタンドアロンの拡張機能は、特定の言語またはテストフレームワークのテスト機能を実装できます。
VS Codeには、コードのテストに関する以下の機能があります
-
複数のテストフレームワークをサポート: 言語拡張機能とスタンドアロンのテスト拡張機能は、Jest、Mocha、Pytest、JUnitなどのさまざまな言語とテストランナーをサポートします。
-
集中型テスト管理: テストエクスプローラーは、プロジェクト内のテストを管理および実行するための集中管理された場所を提供します。テストエクスプローラーは、テスト拡張機能に応じて、プロジェクト内のテストを自動的に検出する場合があります。
-
統合されたテスト結果: エディターでテストコードと並行してテストステータスをインラインで表示したり、テストエクスプローラーですべてのテストを表示したりできます。詳細なテスト結果は、[テスト結果]パネルで利用できます。
-
デバッグ: テストの失敗を診断するためにテストをデバッグします。ブレークポイント、ウォッチ変数など、VS Codeの豊富なデバッグサポートを活用してください。
-
テストカバレッジ: カバレッジ付きでテストを実行して、コードがテストによってどの程度カバーされているかを確認します。
-
AI支援テスト: VS CodeのGitHub Copilotを使用して、テストフレームワークのセットアップ、テストコードの生成、失敗したテストの修正を支援します。
-
タスク統合: テストを実行するタスクを作成することで、テスト作業を簡単にします。コードを変更したときにバックグラウンドでテストを実行することもできます。
VS Codeでテストを始める
VS Codeでテストを開始するには、次の手順に従います
-
拡張機能ビューを開き、プロジェクト用のテスト拡張機能をインストールします。テストカテゴリ (@category:"testing") で拡張機能をフィルターします。
-
アクティビティバーでビーカーアイコン () を選択してテストエクスプローラーを開き、プロジェクト内のテストを検出します。
-
テストエクスプローラーから、またはエディターから直接テストを実行およびデバッグします。
テスト用拡張機能
Visual Studio Marketplaceでテストをサポートする拡張機能を見つけることができます。また、拡張機能ビュー (⇧⌘X (Windows, Linux Ctrl+Shift+X)) に移動し、**テスト**カテゴリでフィルターすることもできます。
Copilotは、テストフレームワークのセットアップを支援し、関連するテスト拡張機能を提案できます。チャットビュー (⌃⌘I (Windows, Linux Ctrl+Alt+I)) を開き、/setupTestsコマンドを入力すると、Copilotがプロジェクトの設定プロセスを案内します。
テストビューでの自動テスト検出
テストビューは、テストを管理および実行するための一元化された場所を提供します。アクティビティバーのビーカーアイコン () を選択すると、テストビューにアクセスできます。コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) でTesting: Focus on Test Explorer Viewコマンドを使用することもできます。
テストを含むプロジェクトがある場合、テストエクスプローラービューはワークスペース内のテストを検出し、一覧表示します。デフォルトでは、検出されたテストはテストエクスプローラーのツリービューに表示されます。ツリービューはテストの階層構造と一致しているため、テストのナビゲートと実行が容易になります。
テストエクスプローラーで再生ボタンを選択すると、テストを実行できます。テストの実行とデバッグセクションで、テストの実行とデバッグについて詳しく学びます。
テストエクスプローラービューでテストをダブルクリックすると、テストコードに移動できます。失敗したテストを選択すると、エディターがテストファイルを開き、失敗したテストを強調表示し、エラーメッセージを表示します。
多くのテストがある場合は、フィルターオプションを使用して、目的のテストをすばやく見つけることができます。フィルターボタンを使用して、ステータスでテストをフィルターしたり、現在のファイルのテストのみを表示したりできます。検索ボックスを使用して名前で特定のテストを検索したり、@記号を使用してステータスで検索したりすることもできます。
その他のアクションメニューでは、ソートや表示オプションなど、より多くの機能にアクセスできます。
新しいテストを追加したり、テストを変更したりした場合は、テストの更新ボタンを使用してテストエクスプローラーのテストリストを更新します。コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) でTest Explorer: Reload testsコマンドを使用することもできます。
テスト拡張機能によっては、プロジェクト内のテストを検出するために、まずテストフレームワークまたはテストランナーを設定する必要がある場合があります。詳細については、テスト拡張機能のドキュメントを参照してください。CopilotチャットビューでsetupTestsコマンドを使用して、プロジェクトのテストフレームワークのセットアップに関するヘルプを得ることができます。
AIによるテスト記述
テストの記述は時間がかかり、しばしば無視されがちです。Copilotは、アプリケーション用のテストコードを作成することで、テスト記述のプロセスを高速化できます。単体テスト、統合テスト、エンドツーエンドテストなどを記述するために使用できます。
VS CodeでCopilotを使用してテストを記述するには、次のいずれかの方法を使用できます
-
エディターのスマートアクション
-
必要に応じて、アプリケーションコードのブロックを選択します
-
エディターを右クリックし、Copilot > テストを生成を選択します
-
-
チャットプロンプト
-
テストを生成したいアプリケーションコードファイルを開きます
-
Copilot Edits ()、チャットビュー (⌃⌘I (Windows, Linux Ctrl+Alt+I))、またはエディターのインラインチャット (⌘I (Windows, Linux Ctrl+I)) を開きます
-
このコードのテストを生成してください。エッジケースのテストも含む。 のようなテスト生成プロンプトを入力します。
プロンプトに
#fileと入力して、追加のコンテキストをプロンプトに追加します。例：このコードのテストを生成してください #file:calculator.jsヒントGitHub Copilotのドキュメントで、単体テストの生成、モックオブジェクトの作成、またはエンドツーエンドテストの作成に関するその他のプロンプトの例を入手してください。
-
Copilotは、アプリケーションコード用のテストケースコードを生成します。既存のテストファイルがある場合は、Copilotがそこにテストを追加します。必要に応じて新しいファイルを作成します。Copilotに追加のプロンプトを提供することで、生成されたテストをさらにカスタマイズできます。たとえば、Copilotに別のテストフレームワークを使用するように依頼できます。
Copilotに独自のコード生成に関する特別な指示を与えることができます。たとえば、Copilotに特定のテストフレームワーク、命名規則、またはコード構造を使用するように指示できます。
VS CodeでCopilotを使用する方法について詳しく学びます。
テストの実行とデバッグ
プロジェクト内のテストが検出された後、VS Code内から直接テストを実行およびデバッグし、テスト結果を表示できます。
テストエクスプローラーでは、セクション見出しのコントロールを使用してすべてのテストを実行またはデバッグします。特定のノードの実行/デバッグアイコンを選択することで、ツリービューで特定のテストを実行またはデバッグすることもできます。
エディターでテストコードを表示しているときに、エディターのガターにある再生コントロールを使用して、その位置でテストを実行します。
ガターコントロールを右クリックして、テストのデバッグなどの他のアクションを表示します。
ガターコントロールのデフォルトのテストアクションは、testing.defaultGutterClickAction設定を使用して構成します。
1つ以上のテストを実行すると、エディターのガターとテストエクスプローラーのツリービューに、対応するテストステータス (合格/失敗) が表示されます。テストが失敗すると、テストエラーメッセージがエディターにオーバーレイとして表示されることに注意してください。
テストエクスプローラーの出力の表示ボタンを使用して、テスト結果パネルでテスト出力を表示します。
Copilotは、失敗したテストの修正に役立ちます。テストエクスプローラーでツリービューにカーソルを合わせ、テスト失敗の修正ボタン (sparkle) を選択すると、Copilotが失敗したテストの修正を提案します。または、Copilotチャットで/fixTestFailureコマンドを入力します。
テストカバレッジ
テストカバレッジは、テストによってコードがどの程度カバーされているかを示す尺度です。テストされていないコードの領域を特定するのに役立ちます。VS Codeは、対応するテスト拡張機能がテストカバレッジをサポートしている場合、カバレッジ付きでテストを実行し、カバレッジ結果を表示することをサポートします。
テストの実行やデバッグと同様に、カバレッジ付きでテストを実行できます。テストエクスプローラービュー、エディターのガター、またはコマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) のコマンドに対応するアクションを使用します。
カバレッジ付きでテストを実行した後、さまざまな場所でカバレッジ結果を表示できます
-
テストカバレッジビューで
ツリービューには、テストとそれらのカバレッジ率が表示されます。色分けされたインジケーターは、カバレッジ率に関する視覚的な手がかりも提供します。各行にカーソルを合わせると、カバレッジ結果に関する詳細が表示されます。
-
エディターでのオーバーレイとして
テストカバレッジがあるコードファイルの場合、エディターはガターに色付きのオーバーレイを表示して、どの行がテストによってカバーされているかを示します。ガターにカーソルを合わせると、カバーされた行には、その行が実行された回数を示すインジケーターも表示されることに注意してください。また、エディターのタイトルバーにあるインラインカバレッジを表示ボタンを選択するか、Test: Show Inline Coverageコマンド (⌘; ⇧⌘I (Windows, Linux Ctrl+; Ctrl+Shift+I)) を使用してカバレッジオーバーレイを切り替えることもできます。
-
エクスプローラービューで、コードファイルのカバレッジ率を表示します
エクスプローラービューには、コードファイルのカバレッジ率が表示されます。エクスプローラー内のファイルまたはノードにカーソルを合わせると、カバレッジ結果に関する詳細が表示されます。
-
差分エディターで
差分エディターが開いている場合、カバレッジ結果もエディターに表示されるのと同様に、差分エディターに表示されます。
タスク統合
VS Codeのタスクは、コマンドラインを入力したり新しいコードを記述したりすることなく、VS Code内でスクリプトを実行したりプロセスを開始したりするように構成できます。VS Codeでは、テストを実行するデフォルトのテストタスクを定義し、必要に応じてテストを実行するためのキーボードショートカットを作成できます。
デフォルトのテストタスクを構成するには、Tasks: Configure Default Test Taskコマンドを使用します。VS Codeは、例えばpackage.jsonファイルに基づいて、テストタスクを自動的に検出しようとします。デフォルトのテストタスクを選択すると、タスクをカスタマイズするためのtasks.jsonファイルが開かれます。
次のコードスニペットは、node --testコマンドをデフォルトのテストタスクとして指定するtasks.jsonファイルを示しています。
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "test",
"group": {
"kind": "test",
"isDefault": true
},
"problemMatcher": [],
"label": "npm: test",
"detail": "node --test src/tests/**.js"
}
]
}
テストタスクを実行するには、Tasks: Run Test Taskコマンドを使用するか、そのコマンドのキーボードショートカットを作成します。
タスクの使用と構成について詳しく学びます。
現在、タスクはVS Codeのテスト機能に特別な統合を持っていません。そのため、タスクでテストを実行してもユーザーインターフェースは更新されません。個々のテスト拡張機能は、UIに統合される特定のテスト自動化機能を提供できます。
テスト設定
VS Codeでのテストエクスペリエンスをカスタマイズするために構成できる複数の設定があります。各言語拡張機能は、その言語でのテストに特化した追加設定を提供する場合があります。以下に、構成できる一般的な設定をいくつか示します
| 設定ID | 詳細 |
|---|---|
| testing.countBadge | アクティビティバーのテストアイコンのカウントバッジを制御します |
| testing.gutterEnabled | エディターのガターにテストコントロールを表示するかどうかを構成します |
| testing.defaultGutterClickAction | ガターテストコントロールを選択したときのデフォルトアクションを構成します |
| testing.coverageBarThresholds | テストカバレッジビューのカバレッジバーのしきい値の色を構成します |
| testing.displayedCoveragePercent | テストカバレッジビューに表示されるパーセンテージ値 (合計、ステートメント、または最小) を構成します |
| testing.showCoverageInExplorer | エクスプローラービューでカバレッジ率を表示するかどうかを構成します |
すべてのテスト関連設定は、設定エディター (⌘, (Windows, Linux Ctrl+,)) で見つけることができます。
次のステップ
-
VS CodeにおけるCopilotとAI支援テストについて詳しく学びます
-
タスクの使用と構成について詳しく学びます