更新日: 2015年1月17日
jQuery & JavaScript

3分でできるQUnitの使い方、JavaScriptをテストしよう

JavaScript の単体テストをさくっとやりたくて QUnit を使ってみました。QUnit は jQuery で採用されている JavaScript 用の単体テストフレームワークです。

QUnit

jasmine や mocha などに比べると最近はシェアを下げているようですが、QUnit は昔ながらのスタンダードな unit test フレームワークなので、とにかく学習コストが低いのが良いです。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

HTML/JavaScript と QUnit 用テストを設置

以下のようにファイルを設置しました。js ディレクトリに動作させる HTML/JavaScript ファイルを設置。


$ tree -L 2
.
├── js
│   ├── hello.html
│   └── hello.js
└── qunit
    ├── hello_qunit.html
    └── hello_qunit.js

$ tree -L 2

├── js

│ ├── hello.html

│ └── hello.js

└── qunit

├── hello_qunit.html

└── hello_qunit.js

HTML, JavaScript はそれぞれ以下の通り。簡単な Hello を alert 表示するだけのコードです。

js/hello.html

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <script src="hello.js"></script>
    <script type="text/javascript">
      var greeting = new Greeting();
      alert( greeting.hello("Taka") );
    </script>
  </body>
</html>

<!DOCTYPE HTML>

<head>

</head>

<body>

var greeting = new Greeting();

alert( greeting.hello("Taka") );

</script>

</body>

</html>

js/hello.js

var Greeting = function() {
  this.hello = function(name) {
    return 'Hello, ' + name;
  };
};

var Greeting = function() {

this.hello = function(name) {

return 'Hello, ' + name;

};

js/hello.html をブラウザで表示すると、以下の alert を出力します。

Screen Shot 2015-01-17 at 22.13.13

QUnit の導入とテスト作成〜テスト結果の確認

続いて qunit ディレクトリ以下に QUnit を導入してテストを作成。QUnit はブラウザにテスト結果を出力します。

さくっと動かしたかったので、code.jquery.com でホスティングされている qunit を、HTML ファイル（hello_qunit.html）で src に指定しました。stylesheet と script に各々指定する。

qunit/hello_qunit.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>QUnit Example</title>
    <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.16.0.css">
  </head>
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <script src="//code.jquery.com/qunit/qunit-1.16.0.js"></script>
    <script src="../js/hello.js"></script>
    <script src="hello_qunit.js"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>QUnit Example</title>

</head>

<body>

</body>

</html>

続いて qunit/hello_qunit.js にテストを書いていきます。Greeting#hello メソッドをテストする。

qunit/hello_qunit.js

var greeting = new Greeting();

QUnit.test( 'JavaScript QUnit Tests', function( assert ) {
  assert.equal( greeting.hello('Mike'), 'Hello, Mike' );
  assert.equal( greeting.hello('Janet'), 'Hello, Janet' );
  assert.notEqual( greeting.hello('David'), 'Hi, David' );
});