編集

テスト

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

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

ヒント

まだ Copilot のサブスクリプションをお持ちでない場合は、Copilot Free プランにサインアップすることで、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 (テスト: テストエクスプローラービューにフォーカス) コマンドを使用することもできます。

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

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)) で Test Explorer: Reload tests (テストエクスプローラー: テストを再読み込み) コマンドを使用することもできます。

注

テスト拡張機能によっては、プロジェクト内のテストを検出するために、まずテストフレームワークやテストランナーを設定する必要がある場合があります。詳細については、テスト拡張機能のドキュメントを参照してください。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 は失敗したテストの修正を支援できます。テストエクスプローラーで、ツリービューにカーソルを合わせ、テストの失敗を修正 ボタン (きらめき) を選択すると、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 では、テストを実行するデフォルトのテストタスクを定義し、オプションでテストを実行するためのキーボードショートカットを作成できます。

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+,)) で見つけることができます。

次のステップ

Python、Java、またはC#でのテストを始める
VS Code での Copilot と AI 支援テストについて詳しくはこちら
タスクの使用と構成について詳しくはこちら

08/07/2025