ページ

▼

2012年1月1日日曜日

QUnitでJavaScriptのユニットテストを始める

JavaScriptでユニットテストを実行するには、QUnitを使うのが良いかと思います。QUnitはもともとjQuery用のユニットテストでしたが、今ではjQueryに依存しないように作られていますので、JavaScriptをテストできます。JavaScriptの特徴でもある非同期のテストにも対応していますので、オススメです。

ここではQUnitのインストールと実行までやってみます。

まず、テストを実行するためのHTMLファイルを用意します。

qunit.html

<!DOCTYPE html>
<html>
<head>
    <title>QUnit Test Suite</title>
    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css" media="screen">
    <script type="text/javascript" src="http://code.jquery.com/qunit/qunit-git.js"></script>
    <script type="text/javascript" src="myTests.js"></script>
</head>
<body>
    <h1 id="qunit-header">QUnit Test Suite</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    <div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>

次に、テストコードを記述するためのmyTests.jsを用意します。先ほどのqunit.htmlと同じ階層に配置します。必ずOKになるテストです。

myTests.js

test('a test', function() {
    ok(true, 'Happy New Year!');
});

では実行してみます。index.htmlをブラウザで開きます。

実行結果

グリーンになりました。

実行結果のデザインが見やすくカッコイイのでモチベーションが保てそうです。デザインの良さもQUnitを選択する理由かもしれません。

詳しい使い方は、公式のqunit（英語）をご覧いただければと思います。日本語ですとNodeで活躍されているJxckさんのサイトがとても詳しいです。

時刻:

0 件のコメント:

コメントを投稿