MochaでJavaScriptのテストを書く

これまでJavaScriptにはあんまり積極的には関わってこなかったのですが、少しはフロントエンドまわりについて知っておこうというのと、多少でもキャッチアップしておこうかなということで、少しずつ勉強してみることにしました。

まずは、テストコードを書くところから始めようかなと。

JavaScriptのテストを書くフレームワークにはいろいろあるみたいなのですが、とりあえず現状ではMochaがよさそうなので、Mochaで始めてみることにしました。

Mocha

はじめてのMocha

まずは、こちらを見ながらMochaのインストール。

Installation

$ npm install -g mocha

testディレクトリがあればよいみたいなので、こちらにテストケースを配置することにします。が、合わせてsrcも作成しておくとしましょう。

$ mkdir src test

テスト対象のコードは、今回はこのようなものを用意。
src/calc.js

module.exports = {
    add: function(a, b) {
        return a + b;
    },

    multiply: function(a, b) {
        return a * b;
    }
};

テストコード。
test/calc-test.js

var assert = require("assert");

var calc = require("../src/calc.js");

describe("calc", function() {
    it("add", function() {
        assert.equal(4, calc.add(1, 3));
    });

    it("multiply", function() {
        assert.equal(6, calc.multiply(2, 3));
    });
});

実行。

$ mocha


  calc
    ✓ add
    ✓ multiply


  2 passing (8ms)

なるほど。

失敗するケースを入れてみましょう。

    it("add fail", function() {
        assert.equal(3, calc.add(1, 1))
    });

実行。

$ mocha


  calc
    ✓ add
    ✓ multiply
    1) add fail


  2 passing (12ms)
  1 failing

  1) calc add fail:

      AssertionError: 3 == 2
      + expected - actual

      -3
      +2
      
      at Context.<anonymous> (test/calc-test.js:15:16)

それっぽい感じで動いていますね。

npmプロジェクトとして作る

最初のベースに、npmプロジェクトとして作ってみます。

「npm init」から、「npm installまで」。

$ npm init
$ mkdir src test
$ npm install -g mocha
$ npm install --save-dev mocha

Mochaを「--save-dev」する必要があるのかどうかですが、「-g」のみのグローバルインストールのみだと、失敗するケースを動かした時に

npm ERR! Test failed.  See above for more details.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

みたいに「ローカルインストールしてないよね？」と言われるので、追加しておきました。

package.jsonでは、testでMochaを起動するようにしておきます。

  "scripts": {
    "test": "mocha"
  },

実行。

$ npm test

> mocha-getting-started@1.0.0 test /path/to/npm-project
> mocha



  calc
    ✓ add
    ✓ multiply


  2 passing (9ms)

こんな感じでいいかな？

gulpと組み合わせる

最後は、gulpと合わせてみます。

必要なプロジェクトの作成と、必要なnpmモジュールのインストール。

$ npm install -g gulp
$ npm install --save-dev gulp mocha gulp-load-plugins gulp-mocha gulp-util

gulp-mochaなるものも、今回使ってみます。

GitHub - sindresorhus/gulp-mocha: Run Mocha tests

srcとtestディレクトリは、最初の例と同じように作っておきます。

あとは、gulpの設定ファイルを書きます、と。
gulpfile.js

var gulp = require("gulp");
var $ = require("gulp-load-plugins")();

gulp.task("mocha", function() {
    return gulp
        .src(["test/*.js"], { read: false })
        .pipe($.mocha({ reporter: "spec" }))
        .on("error", $.util.log);
});

gulp.task("watch-mocha", function() {
    return gulp
        .watch(["src/**", "test/**"], ["mocha"]);
});

この設定だと、「gulp mocha」でテストを実行。

$ gulp mocha
[22:42:16] Using gulpfile ~/path/to/gulpfile.js
[22:42:16] Starting 'mocha'...


  calc
    ✓ add
    ✓ multiply


  2 passing (6ms)

[22:42:16] Finished 'mocha' after 60 ms

「gulp watch-mocha」で、srcもしくはtestディレクトリに変更があった場合に、mochaを起動します。

$ gulp watch-mocha
[22:43:24] Using gulpfile ~/path/to/gulpfile.js
[22:43:24] Starting 'watch-mocha'...
[22:43:24] Finished 'watch-mocha' after 11 ms
[22:43:31] Starting 'mocha'...


  calc
    ✓ add
    ✓ multiply


  2 passing (5ms)

[22:43:31] Finished 'mocha' after 76 ms

とりあえず、こんなところで。