Spring Boot + npm + Geb で入力フォームを作ってテストする ( その38 )( IntelliJ IDEA から Jest のテストを実行する )
概要
記事一覧はこちらです。
Spring Boot + npm + Geb で入力フォームを作ってテストする ( その37 )( Jest で jQuery を利用したモジュールのテストを書く ) の続きです。
- 今回の手順で確認できるのは以下の内容です。
Jest で動かす Javascript のテストファイルを作成すると、JUnit や Spock で書いたテストと同様に IntelliJ IDEA のエディタの左側にテスト実行用のアイコンが表示されます。
エディタ上から Jest のテストを実行できるようなので、実行する方法を調べてみます。
- また JavaScriptのプログラミングはこれだけ効率化できる!使用歴5年目のエンジニアが送るWebStormの厳選神業集 の記事を見て、IntelliJ IDEA に npm ウィンドウというものがあることを知りました。npm ウィンドウから
npm test
コマンドを実行する方法をまとめます。
参照したサイト・書籍
目次
手順
IntelliJ IDEA のエディタの左側に表示されるアイコンから Jest のテストを実行する
エディタの左側に表示されるアイコンから converter.test.js を実行してみる
まずはエディタの左側に表示されているアイコンをクリックしてみます。JRebel のメニューまで出ているのが少し気になりますがここは無視します。Run 'converter.js のテスト'
を選択します。
「Edit configuration」ダイアログが表示されたので、以下の画像のように設定します。
- 「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 のテストの時と同じウィンドウが表示されてテストの実行結果が表示されました。
コードカバレッジの部分がずれて表示されていますが、このままにします(エディタと同じ Source Code Pro 12pt にしたら表がずれずに表示されたのですが Tomcat 起動時のログの文字サイズも大きくなって見にくくなったので止めました)。
「Run/Debug Configuraitons」ダイアログで Jest の設定をする
Run/Debug Configuraitons の Jest の Default 設定を変更して、エディタの左側から実行しようとした時に都度ダイアログで設定しなくてもよいようにします。
IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択します。
「Run/Debug Configuraitons」ダイアログが表示されるので、画面左側から「Defaults」-「Jest」を選択し、画面右側を以下の画像のように設定します。
- 「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 のテスト」として登録されているので、それを選択します。選択したら画面右側を以下の画像のように変更します。
- 「Name」を
converter.js のテスト
→all Jest test
に変更します。 - 画面中央のラジオボタンの選択を「Suite」→「All tests」に変更します。
「OK」ボタンをクリックしてダイアログを閉じます。
エディタの左側に表示されるアイコンから validator.test.js を実行する
validator.test.js を開いているエディタの左側のアイコンからテストを実行して、ダイアログが表示されないことを確認します。
「Run 'validator.js のテスト'」を選択すると、
ダイアログが表示されずにテストが実行されました。
全ての Jest のテストを実行する
画面右上のドロップダウンリストから「all Jest test」を選択した後、
隣の Run ボタンをクリックします。
下にウィンドウが開いて全ての Jest のテストが実行されました。
npm ウィンドウから npm scripts を実行する
npm ウィンドウを表示して npm test
コマンドを実行する
Project ウィンドウ内で package.json を選択→右クリックしてコンテキストメニューを表示した後、「Show npm Scripts」を選択します。
Project ウィンドウの下に npm ウィンドウが表示されます。
test
を選択して Enter キーを押すと「Edit configuration」ダイアログが表示されますので、以下の画像のように設定します。
- 「Node interpreter」を
C:\nodejs\node.exe
→C:\Nodist\bin\node.exe
に変更します。
設定後、画面の下の「Run」ボタンをクリックします。画面の下にウィンドウが開き npm test
コマンドが実行されました。
「Run/Debug Configuraitons」ダイアログで npm の設定をする
Run/Debug Configuraitons の npm の Default 設定を変更して、npm ウィンドウから npm scripts を実行する時に都度ダイアログで設定しなくてもよいようにします。
IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択します。
「Run/Debug Configuraitons」ダイアログが表示されるので、画面左側から「Defaults」-「npm」を選択し、画面右側を以下の画像のように設定します。
- 「package.json」に
C:\project-springboot\ksbysample-boot-miscellaneous\boot-npm-geb-sample\package.json
を設定します。 - 「Node interpreter」を
C:\nodejs\node.exe
→C:\Nodist\bin\node.exe
に変更します。
「OK」ボタンをクリックしてダイアログを閉じます。
npm ウィンドウから npm run springboot
コマンドを実行する
npm ウィンドウを開き springboot
を選択して実行します。
今度はダイアログは表示されず npm run springboot
コマンドが実行されました。
メモ書き
JSDoc を書いておくと Ctrl+P を押した時に引数の型が表示される
IntelliJ IDEA のエディタで Javascript の関数にカーソルを移動して Ctrl+P を押すと引数を表示してくれますが、
JSDoc を書いていると引数名だけでなく型も表示してくれます。
また引数にカーソルを当てると、カーソルが当たっている引数の部分が強調表示されます。
次回は。。。
引き続き Jest を利用して Form.js や validator.js のテストを書きます。またいくつか間違いや修正した方が良さそうな点も見つけたので修正する予定です。
履歴
2017/12/05
初版発行。