JavaScriptの単体テスト環境構築のまとめ．

テストランナーとして「Karma」，テストフレームワーク・アサーションライブラリとして「Jasmine」を使う．

PCのグローバル領域にこれらをインストールしても環境構築はできるが，今回はプロジェクト固有のツールとしてインストールする．

これによって，PCの環境に依存しないテスト環境が構築できる．

前提条件

下記が使用できること．
  • node
  • npm (= node package manager)

検証環境

  • MacOS X 10.9.2

$ npm init

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

$ npm install --save-dev karma

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

[code language=“javascript” title=“package.json” highlite=“12”] { "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" } } [/code]

$ node_modules/karma/bin/karma init

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

[code language=“javascript” title=“package.json” heighlite=“3,4”] "devDependencies": { "karma": "~0.12.9", "karma-jasmine": "~0.1.5", "karma-chrome-launcher": "~0.1.3" } [/code]

プロダクトコードとテストコードを作成

  • jasmineの文法で（http://jasmine.github.io/）

[code language=“javascript” title=“Logic.js”] function Logic() {

}

Logic.prototype.squaredNumber = function(num){ return num * num; }; [/code]

[code language=“javascript” title=“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);

    })
});

}); [/code]

テストコマンドを package.json に記述

[code language="javascript" title="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" } } [/code]

テストに関連するファイルを karma.conf.js に記述

[code language="javascript" title="karma.conf.js"] // list of files / patterns to load in the browser files: [ // main files './main/Logic.js', 
    // test files
    './test/LogicTest.js'
],

[/code]

テスト実行

「$ npm test」で package.json の情報を元にテストが実行される

chromeが自動で起動する

テスト成功

失敗した時はこんな感じ

まとめ

  • $ npm init
  • $ npm install –save-dev karma
  • $ node_modules/karma/bin/karma init
  • プロダクトコードとテストコードを作成
  • テストコマンドを package.json に記述
  • テストに関連するファイルを karma.conf.js に記述
  • テスト実行