HIDARI日記（右）

そのときどき興味ある技術を中心にだらだら書いてます。内容は個人の見解であり、所属する企業を代表するものではありません。

JavaScriptのテスティングフレームワーク周りを非常に簡単に眺めてみる

はじめに

仕事でJavaScriptを書くことになりそうなので簡単に調べて並べてみました．

QUnit

概要

導入方法

  • GitHubから必要なソース一式を取得
  • プロダクトコードを任意のディレクトリに用意（わかりやすければどこでも）
  • 指定ディレクトリにテストコードを用意（自分で適当なテストコードディレクトリ掘ってもいい）
  • test/index.htnlにテストコードとプロダクトコード，QUnit本体を読み込むように設定
  • テストを書いてindex.htmlを読みます

日本語を使いたい場合はindex.htmlに以下を追加する

<meta charset="UTF8">

PhantomJS

概要

導入方法

  • ソースコードをビルドするか，バイナリをダウンロードしてインストール
  • パスを通すといい感じになる

参考サイトよりスクリーンショットを撮るサンプルは以下のコード

var page = require('webpage').create();
var url = 'http://www.google.co.jp/';
page.open(url, function(status) {
  page.render('google.png');
  phantom.exit();
});

実行は $ phantomjs screenshot_google.js とか

用語

  • ヘッドレス

    GUIを持たないという意味で、完全にCUIでのみ動作．GUIテストとかそういうのとは関係なくエンジン部分にGUIを伴うか否かの違い．

  • Webkit

    ブラウザエンジン．Safariとか．

JsTestDriver

概要

導入方法

結論

  • 若干手間が多い
  • が，複数ブラウザを同時に動かせるのはいい

Jasmine

概要

  • BDD指向なテスティングフレームワーク
  • QUnitと同様にPhantomJSやJsTestDriverと共に使える
  • つまりブラウザベースでもコマンドラインベースでも動作させられる
  • 動かすまでが大変？RubyGem使えないと面倒だという噂だけど，スタンドアローン版なら問題ない？

導入方法

  • 基本的にダウンロードして展開するだけ．

作法などは公式サイトなどを参照のこと

$ wget https://github.com/downloads/pivotal/jasmine/jasmine-standalone-1.2.0.zip
# 圧縮時にディレクトリを含まずに圧縮されているため、-d必須
$ unzip jasmine-standalone-1.2.0.zip -d jasmine
$ cd jasmine

結論

  • xUnitになれてる場合RSpec的な書き方はちょっと戸惑うかも
  • 単体で動かす場合にWebサーバ用意するのがちょっと面倒かも
  • BDDで書けるとTDDしやすいのかな

SinonJS

導入方法

  • 公式サイトからダウンロードしたら，よしなに配置

結論

  • 各テストダブルの役目，使い方を先に知っていないと使うのが難しいんじゃないかな

mocha

概要

導入方法

  • $ npm install -g mocha

Karma

概要

導入方法

  • $npm install -g karma

Buster.JS

概要

導入方法

  • $npm install -g buster

その他

Christian Johansen（テスト駆動JavaScriptの著者）はSinon.jsも作っている

おわりに

さてさてどれを使うことになるのでしょう．どれが来てもいいように素振りしておきます．