【npm + Karma + Jasmine】JavaScriptの単体テスト環境を構築する

JavaScriptの単体テスト環境構築のまとめ。
テストランナーとして「Karma」、テストフレームワーク・アサーションライブラリとして「Jasmine」を使う。

前提条件

下記が使用できること。

• node
• npm

検証環境

• MacOS X 10.9.2

package.json生成

$ npm init

• 対話形式でprojectの初期設定をする。
• 不要な項目は、空欄のままEnter
• 最終的に、package.jsonファイルが生成される（直接編集も可）

karmaインストール

$ npm install --save-dev karma

• node_modules/が生成され、その中に karma 関連ファイルが格納される
• option「–save-dev」によって、install 対象の library 情報が自動で package.json に記述される

package.json

{
  "name": "JSTestSample",
  "version": "0.0.0",
  "description": "Sample for JS Test.",
  "main": "index.js",
  "scripts": {
    "test": "node_modules/karma/bin/karma start"
  },
  "author": "",
  "license": "not commedical",
  "devDependencies": {
    "karma": "~0.12.9"
  }
}

karma init

$ node_modules/karma/bin/karma init

• 対話形式で情報を入力
• karma.conf.jsが作成される
• package.json に jasmine 関連ファイルと、chrome-lancher が記述される

package.json

"devDependencies": {
 "karma": "~0.12.9",
 "karma-jasmine": "~0.1.5",
 "karma-chrome-launcher": "~0.1.3"
 }

プロダクトコード+テストコード

• jasmine の文法で

Logic.js

function Logic() {

}

Logic.prototype.squaredNumber = function(num){
    return num * num;
};

LogicTest.js

describe("TestSample>", function(){
    describe("Logic>", function() {
        it("multiNumber", function() {
            var target = new Logic();
            var num = 3;
            var expected = 10;

            var result = target.squaredNumber(num);

            expect(expected).toEqual(result);

        })
    });
});

テスト実行コマンドを設定

package.json

{
  "name": "JSTestSample",
  "version": "0.0.0",
  "description": "Sample for JS Test.",
  "main": "index.js",
  "scripts": {
    "test": "node_modules/karma/bin/karma start"
  },
  "author": "",
  "license": "not commedical",
  "devDependencies": {
    "karma": "~0.12.9",
    "karma-jasmine": "~0.1.5",
    "karma-chrome-launcher": "~0.1.3"
  }
}

テスト実行してみる

$ npm test

• package.json の情報を元にテストが実行される
• chromeが自動で起動する

• テスト成功時

• テスト失敗したときはこんな感じ