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

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

QUnit

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

スポンサーリンク

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

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

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

js/hello.html

js/hello.js

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

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

qunit/hello_qunit.js

とりあえず、assert.equal と assert.notEqual メソッドを使ってみました。ブラウザで qunit/hello_qunit.html を表示するとテスト結果出力を確認できます。

Screen Shot 2015-01-17 at 22.35.50

以上ですが、本当に3分もあればすぐに JavaScript の単体テストができます。QUnit 簡単で良いですね。その他 QUnit の Assertion 用 API は以下を参照。

Assert | QUnit API Documentation

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!