イマドキのIDE事情(84) JavaScriptもユニットテスト! JsUnitを使ってみよう

JavaScriptのユニットテスト

JavaではJUnitを使用してユニットテストを自動化することが可能だ。他の言語でもJUnitに似たテスティングフレームワークが整備されていることが多い。

それではJavaScriptの場合はどうだろうか? 近年Ajaxを活用したWebアプリケーションが増えていることもあり、JavaScriptコードの品質に関する要求も増している。今回はJavaScriptのユニットテストを行うためのツールとしてJsUnitを紹介する。

JsUnit

JsUnitを使ってみよう

JavaScriptのユニットテスト用フレームワークとして最も有名なものがJsUnitだろう。JsUnitはHTMLファイルに記述されたJavaScriptのテストケースをWebブラウザ上で実行するというものだ。

以下にJsUnitのテストケースの例を示す。app/jsUnitCore.jsをインクルードしているのがポイントだ。また、bodyタグ内にはテストケースの実行に必要な任意のHTMLを記述しておくことができる。テストケース自体はJUnitに慣れていれば同じ感覚で記述することができるが、詳細についてはJsUnitのWebサイトで提供されているドキュメントを参照して欲しい。

JsUnitのテストケースの例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript" src="app/jsUnitCore.js"></script>
<script language="JavaScript" type="text/javascript">
// テストコードを記述
function testMessage() {
  var div = document.getElementById('message');
  assertEquals('Hello JsUnit!', div.innerHTML);
}
</script>
</head>
<body>
<!-- テストの実行に必要なHTML -->
<div id="message">Hello JsUnit!</div>
</body>
</html>

JsUnitのディストリビューションに含まれているtestRunner.htmlをブラウザで開くとテストケースを実行するためのテストランナーが表示される。テストランナーはJUnitのものと似ており、テストに成功すると緑色、失敗すると赤色でバーが表示される。

図1 JsUnitのテストランナー

テストが失敗した場合は失敗したテストケースが一覧表示されるので、該当行をダブルクリックすることで詳細情報を参照することができる。

図2 JsUnitのテストが失敗した場合

なお、テストランナーを開く際にfile:///path/to/testRunner.html?testPage=テストケースのURLのようにクエリ文字列で実行するテストケースを指定することができる。このURLをブックマークしておけばいちいちテストケースのURLを手入力する必要がなくなるため、テストを繰り返し実行する場合に便利だ。

テストスイートでまとめて実行

以下のようなJavaScriptを含むHTMLファイルを作成し、テストランナーで実行することで複数のテストケースをまとめて実行することも可能だ。テストケースが増えてきたらテストスイートにまとめて一括実行できるようにしておくといいだろう。

テストスイートの例

function suite() {
  var suite = new top.jsUnitTestSuite();
  suite.addTestPage('testCase1.html');
  suite.addTestPage('testCase2.html');
  return suite;
}

JsUnit以外のテスティングフレームワークも…

JsUnit以外にもJavaScriptのテスティングフレームワークにはさまざまなものがある。

たとえばRhinoUnitはJavaベースのJavaScriptエンジンRhinoとAntを使用したテスティングフレームワークだ。JSListが統合されており、JavaScriptコードの検証を行うこともできる。また、Yahoo! UI Libraryに含まれるYUI Testなど、フレームワークの機能の一部としてユニットテスト用の機能が提供されているケースもある。

以前はJavaScriptの用途と言ってもWebアプリケーションのちょっとした補助的な処理に使われる程度だったが、Ajaxアプリケーションではアプリケーションのコア部分の処理をJavaScriptで記述するケースもあるだろう。肥大化するJavaScriptコードの品質を担保するためにこれらのテスティングツール・フレームワークの利用を検討してみてはどうだろうか。