編集

テスト

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)) でテスト: テストエクスプローラービューにフォーカスコマンドを使用することもできます。

テストを含むプロジェクトがある場合、テストエクスプローラービューはワークスペース内のテストを検出し、一覧表示します。デフォルトでは、検出されたテストはテストエクスプローラーのツリービューに表示されます。ツリービューはテストの階層構造と一致しており、テストのナビゲートと実行を容易にします。

Screenshot that shows VS Code with the Test Explorer showing the tests, matching the test code that is shown in the editor.

テストエクスプローラーから再生ボタンを選択してテストを実行できます。テストの実行とデバッグセクションでテストの実行とデバッグについて詳しく学びます。

ヒント

テストエクスプローラービューでテストをダブルクリックすると、テストコードに移動します。失敗したテストを選択すると、エディターがテストファイルを開き、失敗したテストを強調表示し、エラーメッセージを表示します。

多数のテストがある場合は、フィルタリングオプションを使用して、目的のテストをすばやく見つけることができます。フィルターボタンを使用して、ステータスでテストをフィルタリングしたり、現在のファイルのみのテストを表示したりできます。検索ボックスを使用して名前で特定のテストを検索したり、@記号を使用してステータスで検索したりすることもできます。

Test Explorer view with filtering options

その他のアクションメニューでは、ソートや表示オプションなどのより多くの機能にアクセスできます。

新しいテストを追加したり、テストを変更したりした場合は、テストを更新ボタンを使用して、テストエクスプローラーのテストリストを更新します。コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) でテストエクスプローラー: テストをリロードコマンドを使用することもできます。

注

テスト拡張機能によっては、プロジェクト内のテストを検出するために、まずテストフレームワークまたはテストランナーを構成する必要がある場合があります。詳細については、テスト拡張機能のドキュメントを参照してください。Copilot チャットビューでsetupTestsコマンドを使用して、プロジェクトのテストフレームワークのセットアップに関するヘルプを得ることができます。

AI でテストを作成する

テストの作成は時間がかかり、しばしば無視されがちです。Copilot は、アプリケーション用のテストコードを作成することで、テスト作成のプロセスを加速させることができます。これを使用して、単体テスト、統合テスト、エンドツーエンドテストなどを作成できます。

VS Code で Copilot を使用してテストを作成するには、以下のいずれかの方法を使用できます

エディターのスマートアクション
1. 必要に応じて、アプリケーションコードのブロックを選択します。
2. エディターを右クリックし、Copilot > テストを生成を選択します。
チャットプロンプト
1. テストを生成したいアプリケーションコードファイルを開きます。
2. Copilot Edits ()、チャットビュー (⌃⌘I (Windows、Linux Ctrl+Alt+I))、またはエディターのインラインチャット (⌘I (Windows、Linux Ctrl+I)) を開きます。
3. このコードのテストを生成してください。エッジケースのテストも含む。などのプロンプトを入力してテストを生成します。
  
  プロンプトに#fileと入力して、追加のコンテキストを追加します。例: このコードのテストを生成してください #file:calculator.js
  
  ヒント
  GitHub Copilot のドキュメントで、単体テストの生成、モックオブジェクト、またはエンドツーエンドテストのその他のプロンプトの例を入手してください。

Copilot は、アプリケーションコード用のテストケースコードを生成します。テストファイルがすでにある場合、Copilot はそこにテストを追加するか、必要に応じて新しいファイルを作成します。Copilot にさらにプロンプトを提供することで、生成されたテストをさらにカスタマイズできます。たとえば、別のテストフレームワークを使用するように Copilot に依頼できます。

ヒント

Copilot には、独自のコード生成に関する特別な指示を与えることができます。たとえば、Copilot に特定のテストフレームワーク、命名規則、またはコード構造を使用するように指示できます。

VS Code で Copilot を使用するについて詳しく学びます。

テストの実行とデバッグ

プロジェクト内のテストが検出された後、テストを実行およびデバッグし、VS Code 内から直接テスト結果を表示できます。

テストエクスプローラーでは、セクション見出しのコントロールを使用して、すべてのテストを実行またはデバッグできます。ツリービューで特定のノードの実行/デバッグアイコンを選択して、特定のテストを実行またはデバッグすることもできます。

Run and debug tests in Test Explorer

エディターでテストコードを表示している間は、エディターのガターにある再生コントロールを使用して、その位置でテストを実行します。

Run and debug tests in editor gutter

ガターコントロールを右クリックして、テストのデバッグなどの他のアクションを表示します。

ヒント

testing.defaultGutterClickAction設定を使用して、ガターコントロールのデフォルトのテストアクションを構成します。

1 つ以上のテストを実行すると、エディターのガターとテストエクスプローラーのツリービューに、対応するテストステータス (合格/失敗) が表示されます。テストが失敗すると、テストエラーメッセージがエディターにオーバーレイとして表示されます。

Screenshot that shows a test error message overlay in the editor.

テストエクスプローラーの出力表示ボタンを使用して、テスト結果パネルでテスト出力を表示します。

Test Results panel

ヒント

Copilot は、失敗したテストを修正するのに役立ちます。テストエクスプローラーでツリービューにカーソルを合わせ、テスト失敗を修正ボタン (sparkle) を選択すると、Copilot が失敗したテストの修正を提案します。または、Copilot チャットで/fixTestFailureコマンドを入力します。

Screenshot showing the Test Explorer, highlighting the "Fix Test Failure" button, and the editor that shows a suggestion from Copilot on how to fix the failing test.

テストカバレッジ

テストカバレッジは、コードがテストによってどの程度カバーされているかを示す尺度です。テストされていないコードの領域を特定するのに役立ちます。VS Code は、対応するテスト拡張機能がテストカバレッジをサポートしている場合、カバレッジ付きでテストを実行し、カバレッジ結果を表示することをサポートしています。

テストの実行やデバッグと同様に、カバレッジ付きでテストを実行できます。テストエクスプローラービュー、エディターのガター、またはコマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) のコマンドで対応するアクションを使用します。

Run tests with coverage

カバレッジ付きでテストを実行した後、さまざまな場所でカバレッジ結果を表示できます。

テストカバレッジビューで

ツリービューには、カバレッジ率とともにテストが表示されます。色インジケーターもカバレッジ率に関する視覚的な手がかりを提供します。各行にカーソルを合わせると、カバレッジ結果に関する詳細が表示されます。
エディターのオーバーレイとして

テストカバレッジがあるコードファイルの場合、エディターはガターに色のオーバーレイを表示し、どの行がテストによってカバーされているか、されていないかを示します。ガターにカーソルを合わせると、カバーされている行には、その行が実行された回数のインジケーターも表示されます。エディターのタイトルバーにあるインラインカバレッジを表示ボタンを選択するか、テスト: インラインカバレッジを表示コマンド (⌘; ⇧⌘I (Windows、Linux Ctrl+; Ctrl+Shift+I)) を使用して、カバレッジオーバーレイを切り替えることもできます。
コードファイルのカバレッジ率を表示するエクスプローラービューで

エクスプローラービューには、コードファイルのカバレッジ率が表示されます。エクスプローラーのファイルまたはノードにカーソルを合わせると、カバレッジ結果に関する詳細が表示されます。
差分エディターで

差分エディターが開いている場合、カバレッジ結果もエディターに表示されるのと同様に、差分エディターに表示されます。

タスク統合

VS Code のタスクは、コマンドラインを入力したり、新しいコードを作成したりすることなく、VS Code 内でスクリプトを実行し、プロセスを開始するように構成できます。VS Code では、テストを実行するデフォルトのテストタスクを定義し、必要に応じてテストを実行するためのキーボードショートカットを作成できます。

デフォルトのテストタスクを構成するには、コマンドタスク: デフォルトのテストタスクを構成を使用します。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"
    }
  ]
}

テストタスクを実行するには、コマンドタスク: テストタスクを実行を使用するか、コマンドのキーボードショートカットを作成します。

タスクの使用と構成について詳しく学びます。

注

現在、タスクは VS Code のテスト機能に特別な統合がなく、タスクでテストを実行してもユーザーインターフェイスは更新されません。個々のテスト拡張機能は、UI に統合される特定のテスト自動化機能を提供できます。

テスト構成設定

VS Code のテストエクスペリエンスをカスタマイズするために構成できる設定がいくつかあります。各言語拡張機能は、その言語でのテストに固有の追加設定を提供する場合があります。構成できる一般的な設定をいくつか示します。

設定 ID	詳細
testing.countBadge	アクティビティバーのテストアイコンのカウントバッジを制御します。
testing.gutterEnabled	エディターのガターにテストコントロールを表示するかどうかを構成します。
testing.defaultGutterClickAction	ガターテストコントロールを選択したときのデフォルトアクションを構成します。
testing.coverageBarThresholds	テストカバレッジビューのカバレッジバーのしきい値の色を構成します。
testing.displayedCoveragePercent	テストカバレッジビューに表示されるパーセンテージ値 (合計、ステートメント、または最小) を構成します。
testing.showCoverageInExplorer	エクスプローラービューにカバレッジ率を表示するかどうかを構成します。

すべてのテスト関連設定は、設定エディター (⌘, (Windows、Linux Ctrl+,)) で見つけることができます。

次のステップ

Python、Java、またはC#でのテストを開始する
VS Code での Copilot と AI アシストテストについて詳しく学ぶ
タスクの使用と構成について詳しく学ぶ

10/09/2025