Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/09/30 14:00

 本連載は、テストコードをこれから書こうと考えている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ツールに実行結果を返すため、適切な実行結果の終了ステータスが指定されている
  • テスト時間の表示
  • 必要に応じて正規表現に一致するテストを実行
  • コマンドラインでの実行結果のバリエーション
テスト実行時の
異常検出
  • 遅いテストを強調
  • グローバル変数リーク検出
  • 永久ループを防ぐために自動終了

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 安西剛 (ヤスニシ ツヨシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:JavaScriptでテストを書こう!
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5