WebStormでJestする方法

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

# やりかた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/ae45fc21-a9ce-7efe-caea-ab5552bbfb3c.png)

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

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

## プロジェクトを開く

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/c14c2cde-ba68-ff35-952b-ae741ceddcf8.png)

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

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

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

**File->Settings**を開き、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/920b8db9-3b9b-b33c-6d8d-bd35aafc19a1.png)

**Languages & Frameworks->JavaScript>Libraries**を開いて、右にある![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/b839e218-da44-a665-9fca-3c9caf6183e6.png)ボタンをクリック。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/25009699-e728-dd61-3579-7eca22ded3d3.png)

すると、ライブラリ一覧画面がでてくるので、**jest**を選択して、![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/a2433448-fee8-3dbe-620a-e6263ac32d7f.png)をクリックしてダウンロードする。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/6dd55db9-68a6-bdc1-a28c-7b4dced9e968.png)


これで![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/0b74b9a1-9b6e-3e4c-9311-3d1f8901a90c.png)が追加できたので準備ＯＫ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/f1cd6678-c9d6-2749-6d09-a3bf1a46eb0d.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/561dbc68-b248-8c54-3b32-b0ec2cbc93d3.png)

## WebStorm上からテスト起動

ファイルやエディタ上で右クリックコンテクストメニューから![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/9f0f30c2-3d58-1878-f71a-605d19f74f41.png)するとテストが実行される。とても簡単。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/2b4de18f-76e9-2a37-b7d2-8e23a5ad8dfc.png)

## 実行結果の確認

画面下にテスト実行結果がレポートされる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/4a78f181-5108-f9ec-c87d-136339cca303.png)

## 一括実行のやりかた

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

まず、![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/f149b46e-9a73-11ff-171f-e3f8cc6c61ec.png)の**Run/Debug configurations**(実行/デバッグ構成)をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/52b6dc6d-e10e-abb8-5578-6d2662d84956.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/86fd508b-8507-654b-5e5d-627c46f57361.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/06e3292b-a946-cdc2-1f5d-dc33a5906f1d.png)

左にある![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/2875b963-9398-9aed-e402-e179f92cb7af.png)マークを押すと![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/76a70357-38a6-236b-08d0-cbc527e47ffb.png)というのが自動的に追加される。この![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/c30636a0-7ba9-1461-b70f-58c1ae287771.png)の設定画面の下部ラジオボタンが![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/cbee6e73-f02f-bfd8-abe8-d3f09fa4ace8.png)になっているのを確認して、**OK**をクリック。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/19cc52fa-1ebb-707c-689c-369501872623.png)

以下の編集画面に戻ると**Run/Debug configuration**で![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/0f1a1e6d-9d7f-6a34-940e-6b8ea0c6b398.png)が選択できるようになっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/0f1a1e6d-9d7f-6a34-940e-6b8ea0c6b398.png)を選択した状態で![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/11730ad1-9e4d-fdd5-02b8-3ae00f2cc397.png)をクリックすれば、Jestで作ったすべてのテストをWebStormから実行することができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/5a735e07-88e6-62e0-e4f2-8ab069ee06fd.png)



# まとめ

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

```
npm test
```

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

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