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

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

　本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義から、テスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなどテスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第2回目の本稿は、MochaというJavaScriptテスティングフレームワークの使用方法から、ブラウザでのテストコードの書き方を解説します。

対象読者

• JavaScriptの基本をある程度理解している方
• テストコードをこれから書こうと考えている方

JavaScriptのテスティングライブラリの分類

　JavaScriptには、テストを記述するためのライブラリが多く用意されています。ライブラリには、大きく分けて「テスティングフレームワーク」と「アサーションライブラリ」があります。まずはこの2種類の違いについて説明します。

テスティングフレームワーク

　テストを記述する関数群を提供し、それらの関数を使って書かれたテストの結果を判定、集計した上で結果を表示する機能を持ちます。ブラウザでのテストの場合、ブラウザ上でグラフィカルにテスト結果を表示することもありますし、サーバサイドのJavaScriptであるNode.js向けにはコマンドラインで実行し、結果を表示する機能も持ちます。

アサーションライブラリ

　テスティングフレームワークは、テスト結果を管理するライブラリですが、実行結果を判定するにはアサーションライブラリが必要です。引数にメソッドの実行結果と、想定する戻り値を指定することにより、その結果が満たされていなければExceptionを発行してテスティングフレームワークに伝えます。コメントを記述することもできるライブラリもあり、その内容もExceptionとしてテスティングフレームワークに伝えられます。

　アサーションライブラリが単体で提供されているライブラリもありますが、テスティングフレームワークに付属している場合もあります。

アサーションライブラリの記述例（mocha.html）

assert.equal("Fizz", fizzbuzz(3), '引数が3の場合はFizzが返ってくる');

TDD（テスト駆動開発）とBDD（振る舞い駆動開発）について

　今回は、Mochaというテスティングフレームワークと、chai.jsというアサーションライブラリを使ってテストコードを書いてみます。どちらのライブラリも、TDD（テスト駆動開発）とBDD（振る舞い駆動開発）の記述方法に対応しています。TDDはメソッド動作をテストで表現しながら設計していく考え方で、BDDは振る舞い（要求仕様）をテストで表現しながら設計していく考え方です。TDDは実装ベースで考える手法で、BDDはやりたいことベースで考える手法と言えるでしょう。どちらがいい悪いではなく、目的が違います。それぞれの記述方法の違いは以下のとおりです。

TDD（テスト駆動開発）の記述方法

　テスト駆動開発とは、関数（メソッド）を作る際に、テストコードから書き、そのテストが動作する最低限の実装を関数に記述しながら少しずつ完成させていく手法のことです。この場合、テストは関数の機能、つまり引数がある値の場合、どういう戻り値があるかという視点でテストを記述します。

　以下のコードは、TDDの記述方法で書いています。fizzbuzzメソッドのテストで、引数から想定された戻り値をテストしています。

TDDでのテスト記述例（mocha.html）

suite('fizzbuzzメソッドのテスト', function(){
  suite('#fizzbuzz()', function(){
    test("3の場合はFizzが返ってくる", function () {
      assert.equal("Fizz", fizzbuzz(3), '引数が3の場合はFizzが返ってくる');
    });
  });
});

BDD（振る舞い駆動開発）の記述方法

　テスト駆動開発は、メソッドの挙動を評価するというテストでしたが、振る舞い駆動開発（BDD）は、作成する機能に期待する「振る舞い」を文章で記述していきます。言い換えると、顧客が望んでいるであろう「要求仕様」に近い形で、非エンジニアでも理解しやすい言葉でテストを表現しながら、テストと実装を記述していく手法です。そうすることで、要求仕様と実装をできるだけ近づけ、齟齬や勘違いを防ぎやすくなります。もっというと、要求を作る人がBDDのテストパターンを作ったり、作らなくても確認をすることができれば、より齟齬をなくすことができるようになります。つまり、振る舞いという「共通言語」を作ることで、要求仕様と実装やテストを結びつけることで、齟齬や勘違いを防ぐことがなるでしょう。

　テスティングフレームワークの関数が文章として記述しやすくなっていると同時に、アサーションライブラリも、プロパティをつなげて文章のように記述することができます。

BDDでのテスト記述例（mocha.html）

describe('顧客データを保存する場合', function() {
  it("重複したデータが存在しないこと", function () {
    existsCustomerData("yasunishi").should.to.eql(false);
  });
});

Mochaとは

　MochaはJavaScriptで多く使われているテスティングフレームワークです。ブラウザでの実行とNode.jsでの実行の両方をサポートしています。テストの記述方法としては、以下のものを提供しています。

• BDD（振る舞い駆動開発）の記述形式であるexportとshould
• TDD（テスト駆動開発）の記述形式であるassert
• jQueryをテストすることを目的としたテスティングフレームワークQUnitの記述方法であるQUnitスタイル

　それぞれ、記述方法が違うのみで提供する機能はほぼ同じなので、合った記述方法でテストを書いていけば良いでしょう。mocha自体はアサーション機能は持っていませんので、自由にアサーションライブラリを選択することができます。

　テスト実行および結果の表現方法は、ブラウザ、コマンドライン、JSONなどが用意されており、使用している環境に合った形でテストを実行できます。

Mochaの主な機能

内容	説明
テスト記述方法	export、should、assert、QUnitの各形式
アサーション ライブラリ	バンドルされていないため、好きなアサーションライブラリを使用することが可能
環境	ブラウザ、node.js（コマンド）
実行結果	CIツールに実行結果を返すため、適切な実行結果の終了ステータスが指定されている テスト時間の表示 必要に応じて正規表現に一致するテストを実行 コマンドラインでの実行結果のバリエーション
テスト実行時の 異常検出	遅いテストを強調 グローバル変数リーク検出 永久ループを防ぐために自動終了