karmaを使ってJavaScriptをテストする

2016/10/16

Karmaとは

Karma(よくカルマと言われますがより近い発音はカーマ)は、ブラウザ上で単体テストを実行するためのツールです。ファイル監視やレポート出力などテストランナーとして必要なツールが一通り備わっています。

今回はkarmaを使って簡単なテストを実行してみたいと思います。

Karmaのインストール

npmでインストールできます。

$ npm i -g karma

1	$ npm i -g karma

初期設定

karma init コマンドでインストールできます。

$ karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
> 

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> 

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
> 

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "/Users/***/karma/karma.conf.js".

$ karma init

Which testing framework do you want to use ?

Press tab to list possible options. Enter to move to the next question.

> jasmine

Do you want to use Require.js ?

This will add Require.js plugin.

Press tab to list possible options. Enter to move to the next question.

> no

Do you want to capture any browsers automatically ?

Press tab to list possible options. Enter empty string to move to the next question.

> Chrome

What is the location of your source and test files ?

You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".

Enter empty string to move to the next question.

Should any of the files included by the previous patterns be excluded ?

You can use glob patterns, eg. "**/*.swp".

Enter empty string to move to the next question.

Do you want Karma to watch all the files and run the tests on change ?

Press tab to list possible options.

> yes

Config file generated at "/Users/***/karma/karma.conf.js".

karma.conf.jsファイルが出来るので、テストコードのパスを指定します。

    // list of files / patterns to load in the browser
    files: [
        'test/*.js'
    ],

// list of files / patterns to load in the browser

files: [

'test/*.js'

テストコードの作成

testディレクトリにテストコードを追加します。アサートはjasmineを使用しています。

describe("Sample Test", function() {

  it("test", function() {
    var act = 3;
    var exp = 2;
    expect(exp).toEqual(act);
  });
});
~

describe("Sample Test", function() {

it("test", function() {

var act = 3;

var exp = 2;

expect(exp).toEqual(act);

});

karma.config.jsがあるディレクトリ上でkarma startコマンドを実行します。

$ karma start
16 10 2016 20:20:10.522:WARN [karma]: No captured browser, open http://localhost:9876/
16 10 2016 20:20:10.533:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
16 10 2016 20:20:10.533:INFO [launcher]: Launching browser Chrome with unlimited concurrency
16 10 2016 20:20:10.552:INFO [launcher]: Starting browser Chrome
16 10 2016 20:20:11.757:INFO [Chrome 53.0.2785 (Mac OS X 10.10.5)]: Connected on socket /#xl8ZR5lGW2tRu74yAAAA with id 26370511
Chrome 53.0.2785 (Mac OS X 10.10.5) Sample Test test FAILED
	Expected 2 to equal 3.
	    at Object.<anonymous> (test/sampleTest.js:6:17)
Chrome 53.0.2785 (Mac OS X 10.10.5): Executed 1 of 1 (1 FAILED) (0 secs / 0.015 Chrome 53.0.2785 (Mac OS X 10.10.5): Executed 1 of 1 (1 FAILED) ERROR (0.073 secs / 0.015 secs)

$ karma start

16 10 2016 20:20:10.522:WARN [karma]: No captured browser, open http://localhost:9876/

16 10 2016 20:20:10.533:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/

16 10 2016 20:20:10.533:INFO [launcher]: Launching browser Chrome with unlimited concurrency

16 10 2016 20:20:10.552:INFO [launcher]: Starting browser Chrome

16 10 2016 20:20:11.757:INFO [Chrome 53.0.2785 (Mac OS X 10.10.5)]: Connected on socket /#xl8ZR5lGW2tRu74yAAAA with id 26370511

Chrome 53.0.2785 (Mac OS X 10.10.5) Sample Test test FAILED

Expected 2 to equal 3.

at Object.<anonymous> (test/sampleTest.js:6:17)

Chrome 53.0.2785 (Mac OS X 10.10.5): Executed 1 of 1 (1 FAILED) (0 secs / 0.015 Chrome 53.0.2785 (Mac OS X 10.10.5): Executed 1 of 1 (1 FAILED) ERROR (0.073 secs / 0.015 secs)

2と値を予期していたのに対して、実際の値は3だったとしてこのテストケースは失敗と表示されています。次にテストコードを修正します。

describe("Sample Test", function() {

  it("test", function() {
    var act = 2; // expと同じ値になるように修正
    var exp = 2;
    expect(act).toEqual(exp);
  });
});

describe("Sample Test", function() {

it("test", function() {

var act = 2; // expと同じ値になるように修正

var exp = 2;

expect(act).toEqual(exp);

});

実行すると成功しました。

$ karma start
16 10 2016 20:25:19.258:WARN [karma]: No captured browser, open http://localhost:9876/
16 10 2016 20:25:19.268:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
16 10 2016 20:25:19.269:INFO [launcher]: Launching browser Chrome with unlimited concurrency
16 10 2016 20:25:19.276:INFO [launcher]: Starting browser Chrome
16 10 2016 20:25:20.518:INFO [Chrome 53.0.2785 (Mac OS X 10.10.5)]: Connected on socket /#Qe2FtqggRMJr1-fCAAAA with id 80335151
Chrome 53.0.2785 (Mac OS X 10.10.5): Executed 1 of 1 SUCCESS (0 secs / 0.003 secChrome 53.0.2785 (Mac OS X 10.10.5): Executed 1 of 1 SUCCESS (0.074 secs / 0.003 secs)

$ karma start

16 10 2016 20:25:19.258:WARN [karma]: No captured browser, open http://localhost:9876/

16 10 2016 20:25:19.268:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/

16 10 2016 20:25:19.269:INFO [launcher]: Launching browser Chrome with unlimited concurrency

16 10 2016 20:25:19.276:INFO [launcher]: Starting browser Chrome

16 10 2016 20:25:20.518:INFO [Chrome 53.0.2785 (Mac OS X 10.10.5)]: Connected on socket /#Qe2FtqggRMJr1-fCAAAA with id 80335151

Chrome 53.0.2785 (Mac OS X 10.10.5): Executed 1 of 1 SUCCESS (0 secs / 0.003 secChrome 53.0.2785 (Mac OS X 10.10.5): Executed 1 of 1 SUCCESS (0.074 secs / 0.003 secs)

また、karma実行中はブラウザが起動することがわかります。実ブラウザ上でテストを実行しているということですね。