ページ)しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。戦略技術センター]前回まではWebブラウザを使わないJavaScriptテスト前回「QUnit+PhantomJSでJavaScriptのヘッドレスなテスト」、前々回「PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト」と、「PhantomJS」を軸としたJavaScriptのテストを紹介してきました。PhantomJSでは、Webブラウザを利用せずにコマンドラインからJavaScriptのテストを実行できる点において、TDD(テスト駆動開発)スタイルの開発を行う際に大きな利点があることを述べてきました。Webブラウザを利用しないのは、メリットもある半面、デメリットにもなります。JavaScriptでの開発経験がある方は、Webブラウザの違いに1度は悩まされた経験があるのではないでしょうか。開発者としては、できるだけ実際の使用環境に近い環境でテストしたいのが本音だと思います。いっても、世の中にはさまざまなWebブラウザが存在しており、それぞれのWebブラウザに対して1つ1つテストをしつつ開発を進めていくのは、とても大変な作業になってしまいます。このような状況では、1度の操作で同時に複数のWebブラウザを対象としたTDDスタイルの開発ができる環境やツールが求められます。Webブラウザでテストする「js-test-driver」とはjs-test-driverは、このような課題を解決するためのツールの1つです。js-test-driverはテストの実行環境としてWebブラウザを利用します。具体的には、テスト対象とするWebブラウザを起動しておき、1つ以上のWebブラウザに対して同時にコマンドラインからテストの実行を指示できます。このような形態を取ることにより、実環境に近い形で複数のWebブラウザを対象としたTDDのスタイルでの開発をサポートしています。js-test-driverの動作イメージ(公式サイトより引用)ということで、今回はjs-test-driverをテーマに、基本的な使い方から前回・前々回紹介したテストフレームワークとの連携といったところまで具体的に紹介していきます。今回はコマンドラインからのテスト実行が中心のため解説しませんが、js-test-driverには、Eclipse用のプラグインやIntelliJ用のプラグイン、Mavenとの連携が可能なプラグインなど多数のプラグインが公開され、開発をサポートしてくれています。js-test-driverを4ステップでセットアップjs-test-driverの公式ページにも特徴の1つとして書かれていますが、js-test-driverはセットアップがとても簡単です。セットアップの手順としては、以下の4ステップです。【1】jarファイルのダウンロードjs-test-driverはjarファイルを利用して、サーバの起動、Webブラウザのキャプチャ、テストの実行などを行います。jarファイルは、js-test-driverのダウンロードのページに置かれているので、ここから最新のものを取得します。今回は、JsTestDriver-1.3.5.jarをダウンロードし、利用しています。【2】ソースフォルダとテストフォルダの作成この作業は必須ではないのですが、見通しを良くするためプロダクションコードを入れるフォルダとテストコードを入れるフォルダを作成しておきます。「src」「src-test」というフォルダ名で作成します。「src」フォルダにプロダクションコードを、「src-test」フォルダにテストコードを、それぞれ格納します。【3】設定ファイルの作成js-test-driverの設定ファイルはYAML形式で記述します。デフォルトで読み込まれるファイル名は「jsTestDriver.conf」となっているので、今回はこの名前で作成します。他の名前でも作成することは可能ですが、サーバ起動時に「--config」オプションを付けて設定ファイルを指定する必要があります。作成する場所は「src」「src-test」と同一の階層にします。jsTestDriver.confの具体的な内容は以下の通りです。src-test/*.jsjsTestDriver.confserver:デフォルトのサーバURLを指定。ローカルだけではなく、リモートにあるサーバのURLを指定することも可能load:テスト実行前に読み込むファイルを指定。ここでは、プロダクションコードが書かれているファイルを指定。今回は上記の項目だけ指定します。他にも指定できる項目があるのですが詳細は、こちらを参照してください。【4】テストコードおよびプロダクションコードの作成テストコードとプロダクションコードについては、GettingStartedガイドを参考に、以下のようなコードを用意します。テストコードを書いていきます。!」と返すプロダクションコードと、それに対するテストコードを作成します(ファイル名は、それぞれgreeter.js、greetertest.js)。js-test-driverのテストコードは、「JUnit」によく似ているので、JUnitを利用されたことがある方は、比較的使いやすいと思います。js-test-driverでは、実行したいテストをTestCaseの「prototype」プロパティに代入し、それをテストスイートとする形式を取っています。World!」となってほしいので、AssertionはassertEqualsを利用して検証しています。Hosting」を参照してください。function(){};テストコードが書けたので、プロダクションコード内にgreet(name)関数を実装していきます。!」と出力させる)以下のように記述します。"!";};src/greeter.jsこれで、プロダクションコードとテストコードは準備できました。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。