概要

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

やりかた

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

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

プロジェクトを開く

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

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

Jest用のコード補完ライブラリをWebStormに追加する

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

File->Settingsを開き、

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

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

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

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

WebStorm上からテスト起動

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

実行結果の確認

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

一括実行のやりかた

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

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

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

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

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

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

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

まとめ

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

npm test

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

関連記事
https://qiita.com/riversun/items/6c30a0d0897194677a37