mocha-chrome + chaiでJavascriptの単体テストコードを書く(1)

headless-chrome

ソフトウェアの品質アップには自動テスト可能(CI対応)な単体テストフレームワークを使うのが近道だと知っていても、

ということがあると思います。
そこでJavascriptのCI可能な単体テストコードをmocha-chrome + chaiで書く方法を解説します。

以前はこの用途としてmocha + chai + PhantomJSが使われていました。それぞれの役割は、

です。つまり、

  • mochaに対応した単体テストコードを
  • assertionとしてchaiを用いて記述し
  • それをPhantomJSでも実行可能なようにする

ことになります。

しかしChromeブラウザのヘッドレスモード対応を受け、PhantomJSが開発を停止。
mocha-chromeはPhantomJSの代わりにChromeのヘッドレスモードを使うことで置き換えを図ったものです。
使い方はmocha-phantomjsと非常に似ていますが、まだ開発が始まったばかりということで公式サイトの解説はかゆいところに手が届いておらず十分とは言えません。
ということで、最初はmocha-chrome + chaiを用いて簡単な単体テストコードを書くところから説明します。

用意するもの

公式サイトでは明文化されていませんが、mocha-chromeはnode.js v7.6以上が必要です。
[mocha-chrome/packages.json]

  "engines": {
    "node": ">= 7.6.0"
  },

なおnode.jsのサポートポリシーでは奇数バージョンにはLTSが存在しないので、今ならv8の使用をお勧めします。

またmocha-chromeのインストールとは別にmocha単体とchaiのインストールも必要となります。
いずれもnpmで簡単にインストールできますが、以下のpackages.jsonを使えば"npm install"で一括インストールが可能です。
[packages.json]

{
  "name": "mocha-chrome-chai-test",
  "version": "1.0.0",
  "description": "test environment for mocha-chrome with chai",
  "dependencies": {},
  "devDependencies": {
    "chai": "^4.1.2",
    "mocha": "^3.5.0",
    "mocha-chrome": "^0.1.1"
  },
  "scripts": {
    "test": "mocha-chrome test.html --no-colors"
  }
}

では、いきなりサンプルコードです。解説は次回(2)にて行う予定です。
[test.html]

<!doctype>
<html><head>
    <meta charset="UTF-8">
    <link href="node_modules/mocha/mocha.css" rel="stylesheet" /> <!-- テスト結果表示用のCSS -->
    <script src="node_modules/mocha/mocha.js"></script> <!-- mochaの読込み -->
    <script src="node_modules/chai/chai.js"></script> <!-- chaiの読込み -->
</head><body>
    <div id="mocha"></div> <!-- テスト結果表示領域の確保 -->

    <script> /* テスト対象コード */
        function add(arg1, arg2) {
            return arg1 + arg2;
        }
    </script>
    <script> /* テストコード */
        // 初期化
        mocha.setup('bdd');
        expect = chai.expect;

        // ここにテストコードを書く
        describe('add test', function() {
            it('should return 3 when arg1 is 1 and arg2 is 2', function() {
                expect(add(1,2)).to.be.equal(3);
            });
        });

        // 単体テストの実行
        mocha.run();
    </script>
</body></html>

実行は先ほどのpackage.jsonを使っていれば"npm test"で行えます。

> mocha-chrome test.html --no-colors

  add test
    ✓ should return 3 when arg1 is 1 and arg2 is 2

  1 passing (22ms)