概要
- 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上で確認したり、その後のデバッグへのつながりなどやはり便利に感じました。