mocha + power-assert (+ karma)環境の構築

ここでは、mocha + power-assert + karma 環境の設定手順とテストの実行方法を頭の整理＆備忘の為にまとめています。尚、本ページの情報は、Web知識の浅い、Node.jsの扉を叩いている程度のレベルの私が、ググった情報です。従って、誤りや、ずれてるところも多々あると思います。引用したものについては、出来る限り引用元を記載しましたが漏れている可能性もあります。

karma を追加することで、以下の様にブラウザ経路によるフロント側のjavascriptもテストすることが可能です。
karmaを実行すると、ブラウザ(設定で指定が可能)が自動で起動され対象のテストを実行し、テスト結果はターミナル上に出力されます。また、指定により複数のブラウザでのでの評価が可能であり、ブラウザ種別依存の不具合検出にも役立ちます。

本ページでは、 mocha + power-assert環境の構築 で構築した環境に対して、 karma をセットアップする方法をまとめます。
尚、フロント側からのテストが出来るということで、HTMLを絡めたテストが出来るらしいですが、ここでは触れません。

設定

大きく手順は以下の通りです。

1. 準備
2. karma関連モジュールのインストール
3. karma.conf.js の生成＆編集

準備

• 先立ち mocha + power-assert環境の構築 にて環境を構築しておきます。

karma関連モジュールのインストール

• karmaを利用する為のモジュール群をインストールします。karmaは、テスト関連(開発より)のモジュールの為、
  一部モジュール(karma-cli)を除き、 --save-dev でlocalインストールします。

  • karmaをCLIで利用する為のモジュールのインストール。パス指定を省略するため、本モジュールのみ -g でインストールします。既にinstallずみの場合は不要です。

    • karma-cli

  • machaのkarma向けプラグイン(karma-mocha)をインストール

    • karma-mocha
    • karma-mocha-reporter (出力結果を見やすくしてくれます)

  • フロント側でpower-assertを解釈する為のモジュール群をインストール

    • karma-browserify
    • babelify
    • babel-plugin-espower

  • フロント側となるブラウザのランチャのインストール
    ここでは、chromeを選択していますが、IE・firefoxなどのランチャを複数インストールしても可

    • karma-chrome-launcher
    • (その他のランチャについては こちら を参照)

まとめるとこんな感じ

 > npm install -g karma-cli

 > npm install karma-mocha --save-dev -msvs_version=2012
 > npm install karma-mocha-reporter --save-dev 

 > npm install karma-browserify --save-dev
 > npm install babelify --save-dev
 > npm install babel-plugin-espower --save-dev

 > npm install karma-chrome-launcher --save-dev

karma.conf.js の生成＆編集

• karma.conf.js を環境のルート(package.jsonとおなじところ)にサンプルをベースに生成し、各種設定を盛り込みます。

  • 更新点ポイントは以下の通りです。

    • ブラウザから参照するファイルパスの指定
    • ブラウザ用向けに変換するファイル群の指定
    • テストに用いるブラウザの指定

  • サンプルでは、 mocha + power-assert環境の構築 の環境に、以下を加えたものとしています。

    • "js.front/*.js" フロント向けjs群
    • "test/front/*.js" フロント向けテストコードjs群

  • 尚、 karma init を実行することで、対話的に規定の karma.conf.js を作成することが可能です。サンプルを実行する場合は、後述を適宜盛り込みます。

karma.conf.js(sample)

module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    frameworks: [
        'mocha',
        'browserify'
    ],
    // ブラウザから参照するファイルパスの指定
    files: [
        'test/*.js',            // 例：サーバ向けテストコードjs群
        'js.front/*.js',        // 例：フロント向けjs群  *
        'test/front/*.js'       // 例：フロント向けテストコードjs群 *
        // "lib/jquery.js"      // 必要に応じて、jqueryなどのパスも追加
    ],
    // list of files to exclude
    exclude: [],
    // ブラウザ用向けに(browserifyで)変換するファイル群の指定
    // ここに記載するとrequire('power-assert')がテストコードで利用できる。
    // (テストコードのスクリプトの配置を記載する)
    preprocessors: {
        'test/*.js': ['browserify'],
        'test/front/*.js': ['browserify']
    },
    // browserify option
    browserify: {
      debug: true,
      transform: [
        ['babelify', {plugins: ['babel-plugin-espower']}]
      ]
    },
    // test results reporter to use
    reporters: ['mocha'],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging. possible values:
    //   config.LOG_DISABLE || config.LOG_ERROR
    //   || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // テストに用いるブラウザを指定する
    // 複数指定可。
    // https://www.npmjs.com/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // ファイルの変更監視をやめる。
    // "true":監視しません
    singleRun: false
  });
};

テストの実行

お試しで、mocha + power-assert環境の構築 のコードに、フロント側コードを追加してテストを行ってみます。

テストコードの追加

• karma.conf.js に合わせて、 以下をお試しとして追加します。

js.front/front_js.js(フロント側テスト対象のコード)

var local_util = {
    additioner : function(a, b) {
      return a + b;
    }
};

test/front/front_js.test.js(フロント側テストコード)

var assert = require("power-assert");

describe('front_js ', function () {
 
  describe("additioner", function() {
    it("２つの引数の和を返すべし", function() {
      assert( local_util.additioner(10, 20) === 20 );    // NG
      // assert( local_util.additioner(10, 20) === 30 ); // OK
    });
  });
  
})

テストの実行

• karma start でテストを実行します。

 > karma start

• 実行すると karma.conf.js で指定したブラウザが自動で立ち上がり、テスト結果が、コンソール上に表示されます。
• ブラウザ上には、結果は表示されません。(表示手段はあるかと思いますが未調査)
• 尚、ブラウザ上の"DEBUG"を押下すると、"debug.html"が表示され、各ブラウザの"デベロッパーツール"でもエラー情報が確認可能です。
• また、NG箇所を修正すると動的に、再評価され、再評価結果がコンソール上に表示されます。
  尚、"debug.html"は動的に更新されない為、読み直す必要があります。

実行→エラー検出

実行により起動したブラウザ

実行により起動したブラウザより debug.htmlを参照

コード修正→成功

その他

豆知識

npm test でテストを実行したい場合は、以下の様にpackage.jsonを編集すれば、テスト可能です。

package.json(抜粋)

// package.json 抜粋
  "scripts": {
    "test": "karma start --single-run"   // "--single-run":ファイル監視しないで一回で終わる
  },

sample

ここ に上記の環境をupしています。(ブランチ：karma)

利用手順は以下の通りです。

 > git clone https://github.com/gitseitanaka/study_mocha.git
 > cd study_mocha
 > git checkout -b karma origin/karma
 > npm install           # or "npm install --msvs_version=2012"
 > # フロント側テスト
 > karma start           # or "npm test"
 >                       # or karma start --single-run
 > # サーバ側テスト
 > mocha --require intelli-espower-loader      # mochaのみでも動きます