メインコンテンツまでスキップ

テストの実行とカバレッジ

このページでは、e Builder（Debug）を使って、プロジェクトに用意されたテストを VSCode の画面から実行し、結果とカバレッジを確認する手順を説明します。

テストは PC 上で実行されます。サーバへの接続や サーバ側の準備 のデバッグ設定は不要です。

このページで扱う範囲

本ページで説明するのは、VSCode からテストを実行する手順です。テストコードの書き方は扱いません。

Jest 互換の API でテストを書けます​

テストコードは、JavaScript のテストフレームワークとして広く使われている Jest と同じ記法で書けます。describe / it / expect によるテストの定義、beforeEach / afterEach などのライフサイクル関数、jest.fn() / jest.spyOn() によるモックが利用できます。

Jest を使ったことがあればそのまま書き始められ、AI エージェントにテストコードを生成させる場合も、一般的な Jest の書き方がそのまま通じます。

各 API の詳細は、Jest の公式ドキュメント https://jestjs.io/docs/api を参照してください。

Jest と完全に同じではありません

テストは、サーバサイドスクリプトと同じ JavaScript エンジン（Rhino）上で実行されます。そのため、次の機能は使えません。

使えないもの代わりに使うもの
async / await、Promise（.resolves / .rejects）done コールバック
require()load()
スナップショットテスト（toMatchSnapshot()）toEqual()

前提​

  • JDK が使える状態になっていること（前提条件と必要なツール の Java (JDK) のインストールが完了していれば、追加の設定は不要です）
  • プロジェクトを VSCode で開き、フォルダを信頼する を済ませていること
  • プロジェクトに pom.xml と src/test/jssp があること
  • src/test/jssp の配下にテストコードが用意されていること

1. 設定ファイルを用意する​

テストの一覧を表示するには、プロジェクトルートに Jest の設定ファイルが必要です。設定ファイルがないプロジェクトは、テストの一覧に表示されません。

デバッグ機能だけを使う場合は不要です

設定ファイルが必要なのはテスト機能だけです。スクリプトのデバッグ は、設定ファイルがなくても利用できます。

手順​

  1. プロジェクトルート（pom.xml と同じ階層）に jest.config.js というファイルを作成します。

    <プロジェクトルート>/
    ├── pom.xml
    ├── jest.config.js       <- ここに作成します
    └── src/
        ├── main/jssp/...
        └── test/jssp/...

  2. 次の内容を記述して保存します。Accel CLI で作成したプロジェクトの標準構成であれば、この内容をそのまま利用できます。

    jest.config.js
    module.exports = {
      testMatch: ["src/test/jssp/**/*.test.js"],
      sourcePathMapping: {
        "src/test/jssp/src/": "src/main/jssp/src/",
      },
    };

  3. Jest 設定が変更されたことで再読み込みを促す通知が表示されるので、「ウィンドウを再読み込み」 を選択します。

記述した内容の意味​

項目説明
testMatchテストファイルとみなすファイル名のパターン。ここに一致したファイルが一覧に表示されます
sourcePathMappingテストコードとソースコードの対応付け。テスト対象のソースファイルが自動的に読み込まれます

上記の例では、src/test/jssp 配下の .test.js ファイルがテストとして扱われ、src/test/jssp/src/ のテストコードに対応する src/main/jssp/src/ のソースコードが読み込まれます。

設定ファイルが正しく読み込まれたかどうかは、次の 2. テストを実行する でテストの一覧を開いて確認します。

すでに設定ファイルがある場合

設定ファイルは次の順に探し、最初に見つかった 1 つだけが読み込まれます。

  1. jest.config.js
  2. jest.config.json
  3. package.json の jest の項目

複数用意しても、2 つ目以降は読み込まれません。

書き方に決まりがあります

jest.config.js は module.exports = { ... } の形式で書いてください。

関数を返す形式（module.exports = () => ({ ... })）はエラーになります。また、設定ファイルの中で require() を使うことはできません。

設定を変更したとき

設定ファイルは VSCode の起動時に 1 回だけ読み込まれます。変更すると再読み込みを促す通知が表示されるので、「ウィンドウを再読み込み」を選択してください。

2. テストを実行する​

  1. アクティビティバーの テスト（フラスコのアイコン）を開きます。
  2. プロジェクトごとにテストの一覧が表示されます。
  3. 実行したい項目にマウスを重ねると、右側に 3 つのアイコンが表示されます。目的のアイコンをクリックします。

debug-test-01

テスト（フラスコのアイコン）が見当たらないとき

テストは VSCode に元から備わっているビューです。ただし、テストを提供する拡張機能が 1 つも無い状態ではアイコンごと表示されません。

次の順に確認してください。

  1. プロジェクトルートに Jest の設定ファイルがある（1. 設定ファイルを用意する）
  2. 設定ファイルを作成したあと、ウィンドウを再読み込みした（設定は起動時に 1 回だけ読み込まれます）
  3. フォルダを信頼している（フォルダを信頼する）
  4. プロジェクトルートに pom.xml と src/test/jssp の両方がある

それでも表示されない場合は、出力パネル で e Builder (Debug) を選択し、エラーが出ていないか確認してください。

実行方法は次の 3 種類です。アイコンの名前は、マウスを重ねると表示されます。

アイコン動作
テストの実行テストを実行します
テストのデバッグブレークポイントを有効にしてデバッグ実行します（3. テストをデバッグする）
カバレッジを使用してテストを実行カバレッジを収集しながら実行します（4. カバレッジを確認する）

同じ 3 種類は、項目を右クリックしたメニューからも選択できます。

フォルダ、ファイル、describe、テスト 1 件のいずれの単位でも実行できます。一覧の上部のボタンからすべてのテストをまとめて実行することもできます。

実行結果はアイコンで表示されます。失敗した場合は、該当のテストをクリックするとエディタ上にエラー内容が表示されます。

複数選択しての実行はできません

Ctrl キーを押しながら複数のテストを選んで実行することはできません。1 つずつ実行するか、まとめて全件実行してください。

3. テストをデバッグする​

テストを途中で止めて、変数の中身を確認できます。

  1. 止めたい行にブレークポイントを設定します。
  2. テストの一覧で、実行したい項目にマウスを重ねて テストのデバッグ アイコンをクリックします。

接続先の設定は不要です。e Builder（拡張機能）が自動的に接続します。

4. カバレッジを確認する​

コードのどの行がテストで実行されたかを確認できます。

  1. テストの一覧で、実行したい項目にマウスを重ねて カバレッジを使用してテストを実行 アイコンをクリックします。
  2. 実行後、テストの一覧の画面にカバレッジの割合が表示されます。
  3. ファイルを開くと、実行された行と実行されていない行が色分けして表示されます。

行・分岐・関数の 3 種類が集計されます。

HTML レポートで確認する​

カバレッジ付きで実行すると、ブラウザで見られる HTML 形式のレポートも同時に出力されます。プロジェクトルートの target/coverage/index.html をブラウザで開いてください。

レポートでは次の内容を確認できます。

  • 行・分岐・関数それぞれのカバレッジの割合（プロジェクト全体のサマリ）
  • ファイルごとのカバレッジ一覧
  • ファイル名をクリックすると表示される、ソースコード上の実行された行・実行されていない行

VSCode を開かなくても確認できるため、レビューやチーム内での共有にも利用できます。

出力先を変更する場合は、jest.config.js に coverageDirectory を指定します（既定は target/coverage）。パスはプロジェクトルートからの相対パス（例: coverage）で指定できるほか、<rootDir> から始まる指定（例: <rootDir>/coverage）や絶対パスも利用できます。<rootDir> は jest.config.js の rootDir を指し、rootDir を指定していない場合はプロジェクトルートになります。

jest.config.js
module.exports = {
  testMatch: ["src/test/jssp/**/*.test.js"],
  sourcePathMapping: {
    "src/test/jssp/src/": "src/main/jssp/src/",
  },
  coverageDirectory: "coverage",
};

この例では、レポートは coverage/index.html に出力されます。設定を変更したときは、1. 設定ファイルを用意する と同様にウィンドウの再読み込みが必要です。

作業完了確認​

  • テストの一覧にテストが表示されている
  • テストを実行すると成功・失敗のアイコンが表示される

テスト（フラスコのアイコン）が見当たらない場合や一覧にテストが表示されない場合は、2. テストを実行する の確認事項と 制限事項 を参照してください。