最近のJavaScriptのテスティングフレームワークについて調べてみた

Dec 05, 2010

あるいは kanazawa.js v0.0.1 勉強会 : ATND に参加してきた。

今回はとりあえず今注目している JavaScript テスティングフレームワークの紹介というかリンク集めだけ。

まとめ

QUnit と Jasmine について調べたよ！
好きに使って！ Jasmine の使い方はまだ書くことあるんだけど疲れたからまた今度ね！

自分の背景

JsUnit を使って中規模なコードを書いた経験がある。普段は PHP + SimpleTest で概ね TDD で書いている。Ruby はまだ Test::Unit を使っている。RSpec に移行したいと思いながらタイミングをつかみそこねている。

テスティングフレームワークにできること

まず原則は JS のみのユニットテスト

これをユニットテストと呼ぶか TDD と呼ぶか BDD と呼ぶかは背景の文化によるが、少なくともできることにものすごく大きな差があるわけではないと考えておいて間違いない。

DOM を操作するものについては JS コードを呼び出す HTML に対して操作を加え、結果をテストするのが基本になる。（はず。）

またサーバサイドの動作とは基本的に切り離して考えておく。サーバが静的な HTML しか返さないならそれをテストコードに与えればよいし、Ajax 対応は今まさにテスティングフレームワークがしのぎを削って対応を進めようとしている課題のようだ。もう少し待て。

今回の2つに共通すること

古い xUnit 系よりも自由に名前付けできる

xUnit 系の率直な実装は基本的にテスト名はメソッド名になってしまう。したがってテストの意図を記述しにくいことがある。今回紹介する2つにはそういう制限はない。

QUnit

jquery/qunit - GitHub

個人的な印象は schwern/test-more - GitHub というか Blog | New testing framework | symfony | Web PHP Framework のような感じ。要するに比較的シンプルにテストを書けるもの。

というより恐らくいちばんウケているのは

準備が楽

ってことだと思う。基本的には qunit.js と qunit.css とそれを読み込む HTML さえあればテストを書くことができる。

基本的な使い方

最も基本的な使い方は以下のような HTML を用意してブラウザで読み込む。

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />
	<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>

	<script>

	test("a basic test example", function() {
	ok( true, "this test is fine" );
	var value = "hello";
	equals( "hello", value, "We expect value to be hello" );
	});

	module("Module A");

	test("first test within module", function() {
	ok( true, "all pass" );
	});

	test("second test within module", function() {
	ok( true, "all pass" );
	});

	module("Module B");

	test("some other test", function() {
	expect(2);
	equals( true, false, "failing test" );
	equals( true, true, "passing test" );
	});

	</script>

	</head>
	<body>
	<h1 id="qunit-header">QUnit example</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>

view raw QUnit_example_without_jQuery.html hosted with ❤ by GitHub

これは http://docs.jquery.com/QUnit にあるデモから jQuery 依存の部分を除いたもの。やってみれば分かるけど普通に jQuery 無関係に動く。¹

参考

【レポート】jQueryテストスイート「QUnit」がスタンドアロン化! 使い方を早速チェック (1) QUnitとは? | エンタープライズ | マイコミジャーナル

Jasmine

個人的にはこっちが本命。明確に RSpec-inspired.

Jasmine: BDD for Javascript | Jasmine

Pivotal Labs がメンテナンスをしている。実はこれすごく重要。なぜなら JsUnit も pivotal/js-spec-server - GitHub も関係している Pivotal Labs があえて新しい JavaScript Testing Framework を作っているのだ。これが良くなくて一体何が良いのだ。

また、relevance/blue-ridge - GitHub というかなり気合いの入った Framework も今は「もうやらないから Jasmine 使え」って言ってるくらいなんだから、本命中の本命と言っていいと思う。

Pivotal Labs の名前を意識するようになったのはE和さんの中で流行っているという話を聞いてからだけど、jsUnit 自体は以前から知っていたので、これは正直期待しちゃうってもんだ。

related projects などはまだアッチッチかもしれない。でもこれは結構期待できそう。

Jasmine で fixture

velesin/jasmine-jquery - GitHub

を使うと割と素直に目的を達成できる。jasmine-jquery という名前だが別に jquery を使う必要はない。

同じような目的で jeffwatkins/jasmine-dom - GitHub というものもあるのだが、どうも fixture 周りの動きが変。コード自体はものすごく酷似してるんだけど、なんか変。

Jasmine で Ajax

pivotal/jasmine-ajax - GitHub

というプロジェクトがあるんだけど、まだあまり日本語で話を聞かない。今やったら日本人の中ではリードできるかも。

headless

headless っていうのは GUI-less のことだと思ってるんだけど、この取り組みはいくつかある。

これもまだあまり話を聞かない。

参考

ただしコードを追うと中にはまだ jQuery を呼び出している部分があるので完全に jQuery がなくてもよいわけではないっぽい。 ↩

2010-12-05