かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その38 )( IntelliJ IDEA から Jest のテストを実行する )

概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その37 )( Jest で jQuery を利用したモジュールのテストを書く ) の続きです。

参照したサイト・書籍

目次

  1. IntelliJ IDEA のエディタの左側に表示されるアイコンから Jest のテストを実行する
    1. エディタの左側に表示されるアイコンから converter.test.js を実行してみる
    2. 「Run/Debug Configuraitons」ダイアログで Jest の設定をする
    3. エディタの左側に表示されるアイコンから validator.test.js を実行する
    4. 全ての Jest のテストを実行する
  2. npm ウィンドウから npm scripts を実行する
    1. npm ウィンドウを表示して npm test コマンドを実行する
    2. 「Run/Debug Configuraitons」ダイアログで npm の設定をする
    3. npm ウィンドウから npm run springboot コマンドを実行する
  3. メモ書き
    1. JSDoc を書いておくと Ctrl+P を押した時に引数の型が表示される
  4. 次回は。。。

手順

IntelliJ IDEA のエディタの左側に表示されるアイコンから Jest のテストを実行する

エディタの左側に表示されるアイコンから converter.test.js を実行してみる

まずはエディタの左側に表示されているアイコンをクリックしてみます。JRebel のメニューまで出ているのが少し気になりますがここは無視します。Run 'converter.js のテスト' を選択します。

f:id:ksby:20171202194711p:plain

「Edit configuration」ダイアログが表示されたので、以下の画像のように設定します。

f:id:ksby:20171202200012p:plain

  • 「Configuration file」に C:\project-springboot\ksbysample-boot-miscellaneous\boot-npm-geb-sample\jest.config.json を設定します。
  • 「Node interpreter」に C:\nodejs\node.exe が赤字で表示されていましたが、Nodist でインストールしているので C:\Nodist\bin\node.exe に変更します。
  • 「Jest options」に --coverage を設定します。

設定後、画面下の「Run」ボタンをクリックすると、画面下に Java のテストの時と同じウィンドウが表示されてテストの実行結果が表示されました。

f:id:ksby:20171202200333p:plain

コードカバレッジの部分がずれて表示されていますが、このままにします(エディタと同じ Source Code Pro 12pt にしたら表がずれずに表示されたのですが Tomcat 起動時のログの文字サイズも大きくなって見にくくなったので止めました)。

「Run/Debug Configuraitons」ダイアログで Jest の設定をする

Run/Debug Configuraitons の Jest の Default 設定を変更して、エディタの左側から実行しようとした時に都度ダイアログで設定しなくてもよいようにします。

IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択します。

「Run/Debug Configuraitons」ダイアログが表示されるので、画面左側から「Defaults」-「Jest」を選択し、画面右側を以下の画像のように設定します。

f:id:ksby:20171202205141p:plain

  • 「Configuration file」に C:\project-springboot\ksbysample-boot-miscellaneous\boot-npm-geb-sample\jest.config.json を設定します。
  • 「Node interpreter」に C:\nodejs\node.exe が赤字で表示されていますので、C:\Nodist\bin\node.exe に変更します。
  • 「Working directory」に C:\project-springboot\ksbysample-boot-miscellaneous\boot-npm-geb-sample\src\test を設定します。
  • 「Jest options」に --coverage を設定します。

画面下の「Apply」ボタンをクリックして反映します。

次に全ての Jest のテストを実行するための設定を追加します。左側のツリーの上の方に先程実行したテストの設定が「Jest」-「converter.js のテスト」として登録されているので、それを選択します。選択したら画面右側を以下の画像のように変更します。

f:id:ksby:20171202210952p:plain

  • 「Name」を converter.js のテストall Jest test に変更します。
  • 画面中央のラジオボタンの選択を「Suite」→「All tests」に変更します。

「OK」ボタンをクリックしてダイアログを閉じます。

エディタの左側に表示されるアイコンから validator.test.js を実行する

validator.test.js を開いているエディタの左側のアイコンからテストを実行して、ダイアログが表示されないことを確認します。

「Run 'validator.js のテスト'」を選択すると、

f:id:ksby:20171202232027p:plain

ダイアログが表示されずにテストが実行されました。

f:id:ksby:20171202232208p:plain

全ての Jest のテストを実行する

画面右上のドロップダウンリストから「all Jest test」を選択した後、

f:id:ksby:20171202232648p:plain

隣の Run ボタンをクリックします。

f:id:ksby:20171202232855p:plain

下にウィンドウが開いて全ての Jest のテストが実行されました。

f:id:ksby:20171202233111p:plain

npm ウィンドウから npm scripts を実行する

npm ウィンドウを表示して npm test コマンドを実行する

Project ウィンドウ内で package.json を選択→右クリックしてコンテキストメニューを表示した後、「Show npm Scripts」を選択します。

f:id:ksby:20171202235211p:plain

Project ウィンドウの下に npm ウィンドウが表示されます。

f:id:ksby:20171202235511p:plain

test を選択して Enter キーを押すと「Edit configuration」ダイアログが表示されますので、以下の画像のように設定します。

f:id:ksby:20171203220015p:plain

  • 「Node interpreter」を C:\nodejs\node.exeC:\Nodist\bin\node.exe に変更します。

設定後、画面の下の「Run」ボタンをクリックします。画面の下にウィンドウが開き npm test コマンドが実行されました。

f:id:ksby:20171203220206p:plain

「Run/Debug Configuraitons」ダイアログで npm の設定をする

Run/Debug Configuraitons の npm の Default 設定を変更して、npm ウィンドウから npm scripts を実行する時に都度ダイアログで設定しなくてもよいようにします。

IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択します。

「Run/Debug Configuraitons」ダイアログが表示されるので、画面左側から「Defaults」-「npm」を選択し、画面右側を以下の画像のように設定します。

f:id:ksby:20171203224214p:plain

  • 「package.json」に C:\project-springboot\ksbysample-boot-miscellaneous\boot-npm-geb-sample\package.json を設定します。
  • 「Node interpreter」を C:\nodejs\node.exeC:\Nodist\bin\node.exe に変更します。

「OK」ボタンをクリックしてダイアログを閉じます。

npm ウィンドウから npm run springboot コマンドを実行する

npm ウィンドウを開き springboot を選択して実行します。

f:id:ksby:20171203224520p:plain

今度はダイアログは表示されず npm run springboot コマンドが実行されました。

f:id:ksby:20171203224745p:plain

メモ書き

JSDoc を書いておくと Ctrl+P を押した時に引数の型が表示される

IntelliJ IDEA のエディタで Javascript の関数にカーソルを移動して Ctrl+P を押すと引数を表示してくれますが、

f:id:ksby:20171205011740p:plain

JSDoc を書いていると引数名だけでなく型も表示してくれます。

f:id:ksby:20171205011941p:plain

また引数にカーソルを当てると、カーソルが当たっている引数の部分が強調表示されます。

f:id:ksby:20171205012148p:plain

次回は。。。

引き続き Jest を利用して Form.js や validator.js のテストを書きます。またいくつか間違いや修正した方が良さそうな点も見つけたので修正する予定です。

履歴

2017/12/05
初版発行。