概要

JavaScript開発用のIDE、WebStorm上でJestする方法について書きます
- テストをIDE上で個別実行する方法
- すべてのテストをIDE上で一括実行するやり方

やりかた

WebStormを起動して、Jestのテストケースを含むプロジェクトを開く

Jestのサンプルプロジェクトとして以下を使った
https://github.com/riversun/es6_babel7_jest

プロジェクトディレクトリを開くとこんな感じ。
/testディレクトリ以下に、Jestをつかったテストケース(hello.test.js)が入ってるのでそれを開く。

実は、この状態でもうWebStormでJestを実行可能なのだが、より便利にするために
Jest用のコード補完ライブラリを追加する

コード補完ライブラリを追加していく。

File->Settingsを開き、

Languages & Frameworks->JavaScript>Librariesを開いて、右にあるボタンをクリック。

すると、ライブラリ一覧画面がでてくるので、jestを選択して、をクリックしてダウンロードする。

これでが追加できたので準備ＯＫ。

こんな風に、Jestの構文部分がハイライトされるようになる。

ファイルやエディタ上で右クリックコンテクストメニューからするとテストが実行される。とても簡単。

画面下にテスト実行結果がレポートされる。

いまは、テストケースの書いてあるファイルを1つだけ作ってきたが、以下のように複数あるときにすべてのテストケースを一括実行したい。

まず、のRun/Debug configurations(実行/デバッグ構成)をクリックする

そこで、Edit configuration(構成の編集)を選択し、

Run/Debug configuration(実行/デバッグ構成)ダイアログを開く

左にあるマークを押すとというのが自動的に追加される。このの設定画面の下部ラジオボタンがになっているのを確認して、OKをクリック。

以下の編集画面に戻るとRun/Debug configurationでが選択できるようになっている。

を選択した状態でをクリックすれば、Jestで作ったすべてのテストをWebStormから実行することができる。

JestをWebStorm上で実行する方法について説明しました。

npm test

でコマンドラインからやる方法もアリですが、IDEに統合されていると、GUI上で確認したり、その後のデバッグへのつながりなどやはり便利に感じました。