Mochaを使ってJavaScriptのテストをブラウザで実行してみよう

JavaScriptでテストを書こう！ 第2回

chai.jsとは

　chai.jsは、Node.jsとブラウザで実行できるアサーションライブラリです。BDD、TDD双方のテスト記述方法と、実行環境はブラウザもNode.jsもサポートしています。

　TDDは、「assert」で表現します。想定した結果と処理の結果を関数の引数で渡し、関数で定義された通りの結果になるかどうかを評価します。想定と結果が違っていればExceptionを発生させ、テスティングフレームワークに結果を戻します。主なアサーションメソッドは以下のとおりです。

主なアサーションメソッド

メソッド	説明	使用例
equal	想定と処理結果が 等しいことを判定する	assert.equal(20, '20', '等しいことを判定する');
notEqual	想定と処理結果が 等しくないことを判定	assert.notEqual(20, 11);
deepEqual	配列の内容まで含めて 等しいことを判定	assert.deepEqual({name: 'yasunishi' }, { name: 'yasunishi' });
notDeepEqual	配列の内容まで含めて 等しくないことを判定	assert.notDeepEqual({ name: 'anzai' }, { name: 'yasunishi' });
strictEqual	想定と処理結果が等しいか 型まで厳密に判定	assert.strictEqual(true, true);
notStrictEqual	想定と処理結果が等しくない ことを厳密に型まで判定	assert.notStrictEqual(10, '10');

　BDDは、expectとshouldが用意されています。expectは関数になっていて、評価をする値または関数の実行結果を引数に渡して、プロパティで評価する内容を指定します。shouldはオブジェクト自身を拡張しているため、評価したい変数を直接プロパティで結び、評価する内容を指定します。

expect、shouldが持つ主なアサーション関数およびチェインオブジェクト

関数	説明	使用例（expect）	使用例（should）
.equal(value)、.eql(value)	比較し同じかどうかを判定する。 ===と同様に型まで厳密に判定する。	expect(42).to.equal(42);	foo.should.to.equal(42);
.not	チェーンされる 次のアサーションを 否定する	expect(foo).to.not.equal('bar');	foo.should.not.equal('bar');
.deep	配列の内容まで含めて 判定するという 意味を含める	expect(foo).to.deep.equal({ bar: 'baz' });	foo.should.to.deep.equal({ bar: 'baz' });
.a(type)	指定した型かどうかを 判定する	expect(foo).to.be.a('string');	foo.should.be.a('string');
.true	trueかどうかを 判定する	expect(foo).to.not.be.true;	foo.should.not.be.true;
.exist	存在するか（nullまたはundefinedではない） を判定する	expect(foo).to.exist;	foo.should.to.exist;

使用方法

　Mochaとchai.jsのブラウザでの使用方法を説明します。

Mochaのダウンロードと読み込み

　Mochaは、GitHubからダウンロードを行います。テスト結果の画面を表示するため、CSSファイルの読み込みも行います。

• MochaのGitHub
• CSSのダウンロード
• JavaScriptのダウンロード

　JavaScript読み込み後に、初期設定を行います。setup関数を実行し、引数にテストの形式を指定します。また、各テストで使用するchai.jsのオブジェクトを変数に入れています。以下のコードは、BDDとTDDの記述例です。

Mochaで必要なファイルの読み込み（mochatdd.html）

<link rel="stylesheet" href="css/mocha.css" />
<script src="mocha.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// mochaの機能を呼び出します。ここでは、BDDとTDDを使用します。
mocha.setup('bdd');
mocha.setup('tdd');
var assert = chai.assert;
// expectの機能を読み込み
var expect = chai.expect;
// shouldの機能を読み込み
chai.Should();
-->
</script>

chai.jsのダウンロードと読み込み

　chai.jsは、JavaScriptファイルを読み込みます。chai.jsのサイトからダウンロードを行うことができます。

• chai.jsのインストールマニュアル
• JavaScriptのダウンロード

chai.jsで必要なファイルの読み込み（mochatdd.html）

<script src="chai.js" type="text/javascript"></script>