mochaとchaiの最も基本的な使い方

以前、テストについて調べていて、mochaというのものが広く使われていることを知った。
だがその時はNode.jsに触ったことがなく、コマンドラインにも強い苦手意識があったので、導入できなかった。

結局QUnitを使ってみることになり、それに対して強い不満があったわけではないのだが、そろそろmochaに再挑戦してみることにした。
Node.jsの概要くらいは分かったし、コマンドラインにも少しは慣れた。QUnitのおかげで、テストという概念についても知ることが出来た。以前の自分とは違うぜ、ということで。
そもそも、QUnitではNode.jsのテストが出来ない。

テスティングフレームワークとアサーションライブラリ

テストを行うためには、この両方が必要となる。

テスティングフレームワークは、テスト全体を取りまとめて管理したり、画面に表示したりするためのもの。
アサーションは、個々のテストの判定を行いその結果を返すための機能。そして様々なアサーションを一つにパッケージしたものが、アサーションライブラリ。

あまり分かっていないが、このような認識でそんなに間違っていないと思う。

mochaは、テスティングフレームワークにあたる。これだけではテスト出来ないので、アサーションライブラリとしてchaiを使うことにした。
ちなみに、QUnitはテスティングフレームワークであると同時にそれ自身がアサーションを持っているため、QUnitだけでテストを行えた。

mochaとchaiのインストール

まずはmochaをグローバルインストール。

sudo npm install -g mocha

次に、使用するディレクトリに、chaiをインストールする。

npm install chai

これで完了である。あとはテストを書き、それをmocha ファイル名.jsで実行すればよい。

テストの書き方

まず、アサーションを読み込む。

var chai = require('chai');
var assert = chai.assert;

テストについては、describe()関数を使う。
第一引数にテストの名前、第二引数にテストの内容を記述する。テストの内容は、匿名関数の形で書く。

describe('テストの名前', function () {
    // テストの内容
});

一つ一つのアサートについては、it()を使って書く。
第一引数にアサートの名前、第二引数にアサートの内容を、匿名関数で書く。
一番多く使うアサートは、恐らくstrictEqual()。第一引数にチェックする値、第二引数に期待される値を渡して使う。
つまり、以下のような形になる。

it('アサートの名前', function(){ assert.strictEqual(チェックする値, 期待される値) });

試しに、以下のコードを書き、それをmocha ファイル名.jsで実行した。

var chai = require('chai');
var assert = chai.assert;

var myFunc = function(a, b){
    return a + b;
};

describe('テストのタイトル', function () {
  it('myFuncのテスト', function(){ assert.strictEqual(myFunc(1,2), 3) });
  var result = myFunc(3,3);
  it('myFuncのテスト2', function(){ assert.strictEqual(result, 6) });
});

f:id:numb_86:20160608154344p:plain:w400

このように表示される。

ブラウザでの使い方

mochaとchaiは、ブラウザでも使うことが出来る。

まず、必要なファイルをローカルにダウンロードする必要がある。全部で3つ。

次に、htmlファイルを作成。上記3つを読み込ませ、mochaやchaiを使うための準備を行う。

<!DOCTYPE html>
<html>
<head>
   <title>mochaとchaiをブラウザで使う</title>
   <link rel="stylesheet" type="text/css" href="lib/mocha.css">
</head>
<body>

    <div id="mocha"></div>

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

  <script>
    //BDDスタイルを利用します
    mocha.setup('bdd');
    var assert = chai.assert;
    var expect = chai.expect;
    chai.Should();
  </script>
 
  <!-- テストコードの読み込み -->
  <script src="browser-test.js"></script>
 
  <script>
    mocha.checkLeaks();
    mocha.run();
  </script>

</body>
</html>

あとは、テスト用のコード（上記の場合browser-test.js）を書いていけばいい。
テストの書き方はNode.jsの場合と同じだが、アサーションの読み込みの部分だけ、以下に変更する。

var global = (function(){return this})();
if(!('chai' in global)){
    var chai = require('chai');
    var assert = chai.assert;
};

ブラウザの場合はif文の中は実行されない。
こうすることで、同じテストファイルを、ブラウザからも、Node.jsからも、利用できる。

今回は、以下のコードを書いて、実行してみた。

var global = (function(){return this})();
if(!('chai' in global)){
    var chai = require('chai');
    var assert = chai.assert;
};

var myFunc = function(a, b){
    return a + b;
};

describe('テストのタイトル', function () {
  it('等価比較', function () {
    assert.equal(3, '3');
  });
  it('同値比較', function(){
    assert.strictEqual(3, '3');
  });
  it('自作の関数をテスト', function () {
    assert.strictEqual(myFunc(1, 2), 3);
  });
});