JavaScriptのテストにKarmaを使ってみた
JavaScriptのテストにKarmaを使う機会があったので紹介したいと思います。
今回はKarmaを動かすところまでです。
Karmaってなに？
KarmaとはJavaScript用テストランチャーです。
このツールはJasmineやMochaなどのテストフレームワークを使ってテストを行います。
元々、AngularJS用のテストフレームワークとして開発されていたそうです。
GoogleがJavaScriptテストランナー「Testacular」をオープンソース化し、途中でプロジェクト名をKarmaに変えて今に至ります。
Karma、Mocha、Chai、SinonJSを使ってテストを行います。
では実行環境を構築していきましょう。
環境構築
筆者の動作環境です。
- MacOS X：10.9.4
- NodeJS：0.10.29
- npm：1.4.21
プロジェクトルートに下記package.jsonを置いて
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "test", | |
| "version": "0.0.0", | |
| "description": "test", | |
| "dependencies": {}, | |
| "devDependencies": { | |
| "karma": "^0.12.17", | |
| "karma-mocha": "^0.1.4", | |
| "karma-chai": "^0.1.0", | |
| "karma-phantomjs-launcher": "^0.1.4" | |
| } | |
| } |
$ npm install
を行うと必要なパッケージが揃います。
Karmaの設定
Karmaを設定しましょう。
プロジェクトルートに下記karma.conf.jsを置いて終了です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = function(config) { | |
| config.set({ | |
| basePath: '', | |
| frameworks: ['mocha', 'sinon-chai'], | |
| files: [ | |
| 'js/*.js', | |
| 'spec/**/*.js' | |
| ], | |
| exclude: [ | |
| ], | |
| preprocessors: { | |
| }, | |
| reporters: ['progress'], | |
| port: 9876, | |
| colors: true, | |
| logLevel: config.LOG_INFO, | |
| autoWatch: true, | |
| browsers: ['PhantomJS'], | |
| singleRun: false | |
| }); | |
| }; |
Karmaに用意されているinitコマンドを使用して対話形式で初期設定することも出来ます。
$ ./node_modules/karma/bin/karma init
をして、質問に答えていくとkarma.conf.jsが生成されます。
これでKarmaの設定は完了です。
テストを書いてみる
実際にテストを書いてみましょう。
テストフレームワークにはMocha、アサーションにはChaiを使います。
Mochaとは
ブラウザやNode上で動くJavaScriptのテストフレームワークです。
TDDでもBDDでもかけます。
アサーションなどは別途ライブラリが必要です。
http://visionmedia.github.io/mocha/
BDD
テストフレームワークにはMocha、アサーションにはChaiを使います。
Mochaとは
ブラウザやNode上で動くJavaScriptのテストフレームワークです。
TDDでもBDDでもかけます。
アサーションなどは別途ライブラリが必要です。
http://visionmedia.github.io/mocha/
BDD
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| describe('Array', function(){ | |
| before(function(){ | |
| // ... | |
| }); | |
| describe('#indexOf()', function(){ | |
| it('should return -1 when not present', function(){ | |
| [1,2,3].indexOf(4).should.equal(-1); | |
| }); | |
| }); | |
| }); |
- descride
- ネスト管理可能な階層
- it
- 検証内容を書く
- before/beforeEach
- 前処理
- after/afterEach
- 後処理
Chaiとは
アサーションライブラリです。
should形式/expect形式/assert形式から選べます。
http://chaijs.com/
実際の手順です。
まずはテスト対象から作っていきましょう。
`karma init`時に指定するかkarma.conf.jsに追記しましょう。
テスト対象コード
次にテストコードを書きます。
こちらもテスト対象コードと同じく対象ディレクトリ配下にする必要があります。
テストコード
これで準備完了です。
実行してみましょう。
karmaへパスを通しておくといいと思います。
テストが通りました。
ちなみにブラウザからも見れます。
http://localhost:9876/
はい、簡単ですね。
今回はKarmaの実行までを紹介していきました。
もう少し詳しいテストの書き方は、また別の記事で書きたいと思います。
SinonJSの使い方もどこかで書きますよー。
should形式/expect形式/assert形式から選べます。
http://chaijs.com/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Should形式 | |
| chai.should(); | |
| foo.should.be.a('string'); | |
| // Expect形式 | |
| var expect = chai.expect; | |
| expect(foo).to.be.a('string'); | |
| // Assert形式 | |
| var assert = chai.assert; | |
| assert.typeOf(foo, 'string'); |
実際の手順です。
まずはテスト対象から作っていきましょう。
1.テスト対象のファイルを作る
テスト対象のファイルはkarma.conf.jsのfilesで管理されている必要があります。`karma init`時に指定するかkarma.conf.jsに追記しましょう。
テスト対象コード
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // webroot/js/view_models/hage/hoge.js | |
| function fuga(val) { | |
| return val + ' fuga'; | |
| } |
次にテストコードを書きます。
2.テストファイルを作る
テストコードを作りましょう。こちらもテスト対象コードと同じく対象ディレクトリ配下にする必要があります。
テストコード
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // test/spec/hoge_test.js | |
| describe("fugaは", function() { | |
| it("引数にfugaが付きます", function() { | |
| expect(fuga('hoge')).to.equal("hoge fuga"); | |
| }); | |
| }); |
これで準備完了です。
実行してみましょう。
テスト実行
プロジェクトルートで下記を実行します。
$ ./node_modules/karma/bin/karma start
実行結果
INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket bNVYNYiUg7LDT85UO_-u with id 78213263
PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.009 secs / 0.001 secs)
テストが通りました。
ちなみにブラウザからも見れます。
http://localhost:9876/
はい、簡単ですね。
まとめ
もう少し詳しいテストの書き方は、また別の記事で書きたいと思います。
SinonJSの使い方もどこかで書きますよー。
登録:
コメントの投稿
(
Atom
)
0 件のコメント :
コメントを投稿