IntelliJ IDEAでJestで実装したテストコードの実行、デバッグ、カバレッジ取得をやってみた

2020.04.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

みなさま、テストコード書いてますかー?
さくさくテストコードを書くために、IntelliJ IDEAでJestで書いたテストコードを実行、デバッグ実行、カバレッジ取得を実施する方法を紹介させていただきます。

バージョン

  • IntelliJ IDEA Ultimate
    • 2019.3.3
  • TypeScript
    • 3.8.3
  • Jest
    • 25.2.4

Jestのインストールと構成

Jestの実行環境がない場合は、以下のコマンドを実行しインストールしてください。今回はTypeScriptを使って実装するので、ts-jestも合わせてインストールしておきます。

npm install --save-dev jest @types/jest ts-jest

Jestの設定については、Configファイルを以下の通り作成しました。環境に合わせて適宜変更してください。 Configuring Jest

jest.config.js

module.exports = {
    roots: ["<rootDir>/test", "<rootDir>/src"],
    testMatch: ["**/*.test.ts"],
    transform: {
        "^.+\\.tsx?$": "ts-jest"
    }
};

テストの実行

これでIntelliJ IDEA上でJestでテストを実行することができます。簡単ですね。実装とテストコードのサンプルを作成しましたので、テストを実行してみます。

エディタ上からテストを実行

実行したいテストコードを表示し、実行ボタンをクリックすることで、テストを実行することができます。

以下の通り、1つのテストケースが成功していることを確認できます。

単一のtestを選択することで、1つのテストケースを実行することもできますし、describeを選択することで、describeをまとめてテストを実行することもできます。 また、右クリック(副ボタンのクリック)のメニューから実行することもできます。この実行方法の場合、右クリックしたスコープによってテスト対象が変わります。

  • testのスコープ内で実行
    • 単一のtestを実行
  • describeのスコープ内で実行(testスコープ外)
    • describeをまとめて実行
  • グルーバルなスコープで実行(testdescribeスコープ外)
    • ファイルをまとめて実行

describeをまとめて実行した結果が以下となります。

実行構成を作成してテストを実行

エディタ内からテストを実行することもできますが、実行構成を作成してテストを実行することもできます。エディタ内から実行した場合は実行構成が自動で作成されています。
ここでは、手動で実行構成を作成し、すべてのテストケースを実行してみます。

実行構成を作成

まずは、Edit Configuration...を選択し、実行構成を開きます。

試した環境だとデフォルトですべてのテストケースを実行する設定となっていました。各種config設定やinterpreterが正しく設定されていることを確認し、適切なNameを設定しOKをクリックすることで、すべてのテストケースを実行する実行構成が作成されます。
なおテスト対象を切り替えることもできます。

  • All tests
    • すべてのテストケースを実行
  • Test file
    • 対象のファイルのテストケースを実行
  • Suite
    • 対象のテストスイートを実行(describeの実行時など)
  • Test
    • 対象のテストを実行

テストを実行

上記で作成した実行構成を選択し、実行します。

テストのデバッグ

続いてデバッグ実行してみます。上記でテストを実行する時にDebug xxx(「xxx」は実行構成名)を選択するだけで、デバッグすることができます。
ブレークポイントを設定し、デバッグを実行してみます。

カバレッジの取得

最後にカバレッジを取得してみます。デバッグの実行同様にテストの実行時にRun xxx with Coverage(「xxx」は実行構成名)を選択するだけで、カバレッジを取得することができます。

テスト対象のコードを開くことで、行レベルでテストで実行されているか?実行されていないか?を確認することができます。また、ファイル毎、ディレクトリ毎にカバレッジを確認することができます。

さいごに

難しい設定をすることなくIntelliJ IDEA上で、テストの実行、デバッグ実行、カバレッジの取得をすることができました。ここらへんの実行設定は、利用するツールなどで、変わると思うのですが、IntelliJ IDEAは簡単に設定・実行することができるので、利用してみてはいかがでしょうか。こういった環境があるとテストコードの実装がとてもはかどりますよー。

参考