Karma+JasmineでJavaScriptをテストする

このページでは、KarmaというテストランナーとJasmineというテストフレームワークを使って、JavaScriptをテストする方法を紹介します。

関連記事

このページの続きとして、以下の関連記事があります。順番は関係ないので、必要なものを見てください。

テスト対象

例として、下記のコードをテストしたいとします。index.htmlを開くと数値の合計値が表示されるものです。

<!-- index.html -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <p id="message"></p>
  <script src="js/app.js">
  <script src="js/jquery.js">
  <script>
    $(function() {
      var num = app.sum(1, 2);
      app.showMessage(num);
    }());
   </script>
</body>
</html>
// app.js
(function(global) {
  'use strict';
  global.app = {
    sum: function(a, b) {
      return a + b;
    },
    showMessage: function(message) {
      $('#message').text(message);
    }
  };
}(this.self));

フォルダ構成は下記の通りです。appフォルダにテスト対象のコードを入れ、specフォルダにテストコードを書いていきます。

Project
  ├─ app
  │    ├─ index.html
  │    └─ js
  │       ├─ jquery.js
  │       └─ app.js
  └─ spec

テスト環境構築

事前準備

Node.jsはインストール済みとして、package.jsonがない場合は作ります。設定は自由に。

$ npm init

karmaのインストール

npmからkarmaをインストールします。

$ npm install karma --save-dev

karmaの設定ファイルを作成します。テストフレームワークとしてJasmine、ブラウザにChrome、テストコードのディレクトリをspecフォルダ以下のjsファイルに指定します。

$ node_modules/.bin/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.
> app/js/jquery.js
> app/js/app.js
> spec/**/*.js
WARN [init]: There is no file matching this pattern.
>
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 ".../Project/karma.conf.js".

テストコードを書く

app.jsのテストコードとして、specフォルダにappSpec.jsを作成します。appオブジェクトのsum関数をテストします。

// appSpec.js
describe('app', function() {
  it('should sum numbers', function() {
    expect(app.sum(1, 2)).toEqual(3);
  });
});

テストを開始します。するとブラウザが立ち上がりテストコードが実行されます。「SUCCESS」と表示されていて、テストが成功したことがわかります。テストにかかった時間も表示されるため、処理速度の目安にすることもできます。

$ node_modules/.bin/karma start
INFO [karma]: Karma v0.12.37 server started at https://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 43.0.2357 (Mac OS X 10.10.4)]: Connected on socket IFN6So2x3Bv54q3o_ch4 with id 97782541
Chrome 43.0.2357 (Mac OS X 10.10.4): Executed 1 of 1 SUCCESS (0 secs / 0.002 secChrome 43.0.2357 (Mac OS X 10.10.4): Executed 1 of 1 SUCCESS (0.005 secs / 0.002 secs)

karmaの結果画面

コマンドの整理

上記では「node_modules/.bin/karma」を実行しており、binのパスまで指定する必要がありますが、npm経由でコマンドを実行すると、パスを指定しなくても実行できます。

[package.json]
{
  ...
  "scripts": {
    "test": "karma start"
  },
  ...
}

下記コマンドでテストが実行できます。

$ npm test

ちなみに

DOM操作を行っているappのshowMessage関数のテスト方法はこちらを紹介しています。

コメントを残す