テスト

Visual Studio Code は、コードをテストするための豊富な機能を提供します。プロジェクト内のテストを自動的に検出し、テストを実行およびデバッグして、テスト カバレッジの結果を取得できます。VS Code の GitHub Copilot は、プロジェクトのテスト フレームワークのセットアップを支援し、テスト コードの生成や失敗したテストの修正をサポートします。

この記事では、VS Code でのテストの開始方法、一般的なテスト用拡張機能の探し方、およびテスト機能について学びます。また、VS Code の Copilot がテストを迅速に作成し、失敗したテストを修正するのをどのように支援できるかについても説明します。

VS Code でのテストについて

VS Code のテスト サポートは言語固有であり、インストールされているテスト用拡張機能に依存します。言語拡張機能またはスタンドアロンの拡張機能が、特定の言語またはテスト フレームワークのテスト機能を実装します。

VS Code には、コードをテストするための以下の機能があります

• 複数のテスト フレームワークのサポート: 言語拡張機能やスタンドアロンのテスト用拡張機能が、Jest、Mocha、Pytest、JUnit などのさまざまな言語やテスト ランナーをサポートします。

• 一元化されたテスト管理: テスト エクスプローラーは、プロジェクト内のテストを一元管理および実行するための場所を提供します。テスト用拡張機能によっては、テスト エクスプローラーがプロジェクト内のテストを自動的に検出する場合があります。

• 統合されたテスト結果: エディター内のテスト コードの横にインラインでテスト ステータスを表示したり、テスト エクスプローラーでテストをすべて表示したりできます。詳細なテスト結果は「テスト結果」パネルで確認できます。

• デバッグ: テストの失敗を診断するために、テストをデバッグします。ブレークポイント、変数のウォッチなど、VS Code の豊富なデバッグ サポートを活用できます。

• テスト カバレッジ: コードがテストによってどの程度カバーされているかを確認するために、カバレッジ付きでテストを実行します。

• AI によるテスト支援: VS Code の GitHub Copilot を使用して、テスト フレームワークのセットアップ、テスト コードの生成、失敗したテストの修正を支援します。

• タスクの統合: テストを実行するためのタスクを作成して、テスト作業を容易にします。コードを変更したときにバックグラウンドでテストを実行することも可能です。

VS Code でテストを開始する

VS Code でテストを開始するには、次の手順を実行します

1. 拡張機能ビューを開き、プロジェクトに適したテスト用拡張機能をインストールします。拡張機能を Testing カテゴリ（@category:"testing"）でフィルターします。

2. アクティビティ バーのビーカー アイコン（) を選択してテスト エクスプローラーを開き、プロジェクト内のテストを検出します。

3. テスト エクスプローラーから、またはエディターから直接テストを実行およびデバッグします。

テスト用拡張機能

テストをサポートする拡張機能は、Visual Studio Marketplace で見つけることができます。また、拡張機能ビュー（⇧⌘X（Windows、Linux は Ctrl+Shift+X））を開き、Testing カテゴリでフィルターすることもできます。

テスト ビューでの自動テスト検出

テスト ビューは、テストを一元管理および実行するための場所を提供します。アクティビティ バーのビーカー アイコン（）を選択してテスト ビューに移動できます。また、コマンド パレット（⇧⌘P（Windows、Linux は Ctrl+Shift+P））で「テスト: テスト エクスプローラー ビューにフォーカス (Testing: Focus on Test Explorer View)」コマンドを使用することもできます。

テストを含むプロジェクトがある場合、テスト エクスプローラー ビューはワークスペース内のテストを検出して一覧表示します。デフォルトでは、検出されたテストはテスト エクスプローラーにツリー ビューで表示されます。このツリー ビューはテストの階層構造に対応しているため、テストの移動や実行が簡単になります。

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

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

「その他の操作 (More Actions)」メニューでは、並べ替えや表示オプションなどの詳細な機能にアクセスできます。

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

AI を使用してテストを作成する

テストの作成は時間がかかるため、しばしば後回しにされがちです。Copilot はアプリケーションのテスト コードを作成することで、テスト作成のプロセスをスピードアップできます。単体テスト、統合テスト、エンドツーエンド（E2E）テストなどの作成に使用できます。

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

• エディターのスマート アクション

  1. 必要に応じて、アプリケーション コードのブロックを選択します

  2. エディター内を右クリックし、Copilot > テストの生成 (Generate Tests) を選択します

• チャット プロンプト

  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 に依頼することができます。

VS Code での Copilot の使用についての詳細をご確認ください。

テストの実行とデバッグ

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

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

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

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

1 つ以上のテストを実行すると、エディターのガターとテスト エクスプローラーのツリー ビューに、対応するテスト ステータス（成功/失敗）が表示されます。テストが失敗すると、テストのエラー メッセージがエディターにオーバーレイとして表示されることに注目してください。

テスト エクスプローラーの「出力を表示 (Show Output)」ボタンを使用して、テスト結果 (Test Results) パネルにテスト出力を表示します。

テスト カバレッジ

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

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

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

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

  ツリー ビューにテストとそれぞれのカバレッジ率が表示されます。カラー インジケーターによって、カバレッジ率を視覚的に把握することもできます。各行をポイント（ホバー）すると、カバレッジ結果のより詳細な情報が表示されます。

  

• エディター内のオーバーレイ

  テスト カバレッジがあるコード ファイルについては、エディターのガターにカラー オーバーレイが表示され、どの行がテストでカバーされているか（またはされていないか）を示します。ガターをポイント（ホバー）すると、カバーされている行については、その行が実行された回数を示すインジケーターも表示されます。また、エディターのタイトル バーにある「インライン カバレッジを表示 (Show Inline Coverage)」ボタンを選択するか、「テスト: インライン カバレッジの切り替え (Test: Show Inline Coverage)」コマンド（⌘; ⇧⌘I（Windows、Linux は Ctrl+; Ctrl+Shift+I））を使用して、カバレッジ オーバーレイを切り替えることもできます。

  

• コード ファイルのカバレッジ率を表示するエクスプローラー ビュー

  エクスプローラー ビューに、コード ファイルのカバレッジ率が表示されます。エクスプローラー内のファイルまたはノードをポイント（ホバー）すると、カバレッジ結果の詳細が表示されます。

  

• 差分 (diff) エディター

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

• テスト カバレッジ ツールバー

  エディター内のテスト カバレッジ ツールバーには、テスト カバレッジの結果が表示され、カバーされていないコード ブロック間を移動したり、インライン カバレッジを切り替えたりできます。テスト カバレッジ ツールバーを有効にするには、 testing.coverageToolbarEnabled VS Code で開く VS Code Insiders で開く 設定を使用します。

  

タスクの統合

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 でのテスト体験をカスタマイズするために、複数の設定を構成できます。各言語の拡張機能は、その言語でのテストに固有の追加設定を提供する場合があります。構成可能な一般的な設定の一部を以下に示します

テストに関連するすべての設定は、設定エディター（⌘,（Windows、Linux は Ctrl+,））で確認できます。

次のステップ

• Python、Java、または C# でのテストを開始します

• VS Code での Copilot と AI 支援によるテストに関する詳細情報をご確認ください

• タスクの使用と構成に関する詳細情報をご確認ください