PhpStorm
JsTestDriver

PHPStormでjsTestDriverの環境を整える

More than 3 years have passed since last update.

この記事を書いた時点のPHPStormはV7.1.3です。テストコードの事態の書き方はいくつか記事を書いているが、テスト環境の整え方についてまとめていなかったのでメモ。

参考
Backbone.jsのEventテストでハマった話
CoffeeScriptでAsyncTestCaseを書く
非同期関数のcallbackのテストを行う

jsTestDriver plug-inのダウンロード

  1. PHPStormの環境設定を開きます。
  2. 設定の検索で plug と入力したら、設定項目がフィルタされて便利です。
  3. Browse repositoriesボタンを押します。
    Preferences.png

  4. レポジトリにあるプラグイン一覧が表示されるので、jsTと入力して項目を絞り込みます。

  5. jsTestDriverを選択してダウンロードボタンを押します。
    Browse_Repositories.png

  6. ダウンロードが完了したら 一度PHPStormを再起動 します。再起動しないとjsTestDriverが有効になりません。

ライブラリの追加

jsTestDriverのライブラリを追加しておけば、assertEqualsなどのコード補完ができるようになります。
下記のようなテストコードファイルを作成します。

hogetest.js
TestCase("test", {})

TestCaseにカーソルを合わせOption+Enterを押します。jsTestDriver assertion frameworkを追加しますか?のようなメッセージが表示されるのでOKを押します。
Code_Assistance_For_JsTestDriver_Assertion_Framework.png
下記のように環境設定にも追加されます。
Preferences.png

テスト設定ファイルの作成

下記のようなテストの設定ファイルを書きます。ファイルの内容まではここでは説明しません。

test.jstd
server: http://localhost:9876

load:
  - hoge.js

test:
  - hogetest.js

テストの環境設定

  1. テスト環境の設定画面にjsTestDriverが追加されているはずなので選択します。
    Run_Debug_Configurations_と_routewebapp_-____Develop_PhpstormProjects_routewebapp_.png

  2. 設定の名前は適当にtestなどと入力します。

  3. Configuration fileは先ほど作成したjstdファイルを選択します。
    Run_Debug_Configurations.png

  • この時点ではTest Connectionは失敗するのでOKで設定を保存してください。

テストの実行

とにかく、先ほどのテスト設定でテストを実行してみます。macの場合^Rです。すると、下記のエラーが表示されるので、Start a local serverをクリックします。
routewebapp_-____Develop_PhpstormProjects_routewebapp_.png

下記のようにjsTestDriverの画面が追加されます。

routewebapp_-____Develop_PhpstormProjects_routewebapp_.png
テストを実行したいブラウザを選択して、改めてテストを開始(^R)するとテストが実施されます。