このページでは、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)
コマンドの整理
上記では「node_modules/.bin/karma」を実行しており、binのパスまで指定する必要がありますが、npm経由でコマンドを実行すると、パスを指定しなくても実行できます。
[package.json]
{
...
"scripts": {
"test": "karma start"
},
...
}
下記コマンドでテストが実行できます。
$ npm test
ちなみに
DOM操作を行っているappのshowMessage関数のテスト方法はこちらを紹介しています。