jsdokushoでJSのUnitテストのさわりを勉強した

先日、jsdokushoという勉強会に参加しまして、JSのUnitテストについてサラっと勉強してきました。

当日の流れはざっくりこんな感じ。

  1. JSのテストと必要性のさっくりとした説明
  2. JSのテストフレームワークの列挙
  3. グループ分けして2からピックアップしたフレームワークについて調査
    • Buster.js
    • QUnit
    • JsTestDriver

自分はJsTestDriver(以下「JTD」と表記)班になりました。

JTDはKayacさんがSinon.js(Buster.jsの前身的フレームワーク)と組み合わせて使っているようです。
このJTDはJava製で普通はコマンドラインから使うようなのですが、僕は余り慣れてないのと、愛用しているIDE(WebStorm)にプラグインがあるとわかったので、それを利用することにしました。

その勉強会ではバシャログさんのブログ記事を見ながらやったので、使い方については基本的にそちらを参照してください…。
コマンドラインからセットアップする方法は同じ班でやったryuoneさんのブログ記事を参照してください。

JsTestDriverの使い方の軽い解説

さらっと使い方を解説します。

基本ファイル構成

まずはファイル構成です。

/root/
  src/
    src.js
  test/
    src_test.js
  jsTestDriver.conf

上記のファイル一式が基本構成になります。
srcディレクトリにテストの対象となるスクリプトを、testディレクトリにテストのスクリプトを書きます。
後述しますが、テストに関する設定はjsTestDriver.confに書くのでディレクトリ名は自由につけられると思います。

テスト対象のスクリプト

src/src.js

function sum (a, b) {
  return a + b;
}

こんな感じで関数、メソッドを書き込んでいって、それがちゃんと期待通りの動きをするか確かめるのがUnitテストです。

テストスクリプト

test/src_test.js

TestCase('SumTest', {
  'test function sum': function() {
    assertEquals(11, sum(5,6))
  }
});

TestCase関数を呼び出して、第1引数にテストケース名を、第2引数にはテストメソッドのオブジェクトを渡します。ひとつのテストケースに複数のテストを書くことが可能なようです。

このテストはsum関数の出力する値が正しいか(sum(5,6)は11を返すか)調べます。
結果、これは正しいのでテストをパスします。

メソッドの処理の中身にassertEquals()という関数があります。
これがテスト結果を返す関数で、assert○○という関数が何種類も用意されているので、テストの種類によって使い分けます。
assertEqualsは第一引数と第二引数が同じ(同値?要調査)かテストする関数ですね。

設定を書き込む

server: http://localhost:9876

load:
  - src/*.js
  - test/*.js

恥ずかしいくらいにバシャログさん丸パクり。
監視するサーバーのパス(とポート)と読み込むスクリプトの場所を記述します。
(ただし、PhpStorm/WebStormを使う場合はServerを指定しなくてもいいようです)


テストを実行したらスクリプトがテストをパスしたかエラーが出たか知らせてくれます。
エラーが出たら行番号や内容も教えてくれるので便利。
Sinon.jsと組み合わせるとイベントの監視とかajaxの監視とかもできるようになるみたいです。

正直なところ自分はさわりをふわっと触っただけなので、詳しい解説は他のブログを見るなり、テスト駆動JavaScriptの書籍を読んだほうがいいです。

さらっと参考サイトを示しておきます。

「jsdokushoでJSのUnitテストのさわりを勉強した」への2件のフィードバック

コメントは停止中です。