小さくKarmaとmochaでテスト環境を整える。
流行りにのって(遅い！)Angular.jsを試してみようと思ったのですが、Angularの前に気になって仕方がないことがあります。
「Karmaが便利なんだろうけどさっぱりわからん」
公式のチュートリアルではKarmaがすべて「下ごしらえ完成した状態」になって提供されます。動いてくれているのですが、なぜこう動いてくれているのかさっぱり分からなくて何となく気持ち悪い。
Karmaについて調べようとしたのですが、以外と情報が少ない。公式ではいきなり動画だったり :(
ということで、小さくKarmaとmochaでテスト環境を整える事を目的としたメモ・備忘を文章で残します。
var hello = function() { return "hello"; };
describe("karma and mocha testing", function() { it ("return hello", function() { expect(hello()).to.equal("hello"); }); });
という二つのファイルを用意しています。 hello.jsというファイルで定義したhelloという関数をhello.test.jsというファイルでテストする。ディレクトリとかは特に作らずやります。小さくスタートするのが目的だから
/
├ hello.js
└ hello.test.js
まずはKarmaをグローバルでインストールします。
$ npm install -g karma $ karma --version Karma version: 0.10.9
これを書いている時は0.10.9がインストールされます。
Karmaの動作にはkarma.conf.jsという設定ファイルが必要です。これは直接ファイルを作成してもよいですし、コマンドからウィザードで作成する事も可能です。今回はウィザードを利用します。
ウィザードを始めるには上記コマンドを叩きます。すると、Karmaの設定フィアルである「karma.conf.js」の作成ウィザードにはいります。
Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > mocha
はじめにテストフレームワークを聞かれるからmochaを選択します。
気をつけたいのはタブで切り替えるという事です。
説明書きにも書いていますが、、、私はちゃんと読まずに必死に文字を消そうとしていました。
WARN [init]: Missing "karma-mocha" plugin. npm install karma-mocha --save-dev
このような注意をされますが、ここはひとまず無視して先に進めます。
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
Require.jsを使うかきかれるのでnoを選択。
Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome >
KarmaはブラウザでJSを実行してそれをキャプチャしてくれる仕組みです。そのためのブラウザを選択します。
複数選べるようですが、ここはChromeだけで先に進みます。
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. > *.js >
JS(テストファイル含む)ファイルどこにおいてんの？って聞かれますので、今回は*.js って返答しておきます。小さく始める事が目的なので、ディレクトリとか作成せずにまずは動作することを目的としますので。
*.js でエンター。空白のままでもう一度エンター。
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
ファイルが変更されたら自動的にKarmaでテストする？って聞かれる。watchして欲しいのでyesです。
とするとkarma.conf.jsが作成される。作成されたkarma.conf.jsはウィザードで設定した物の他にポートなどがコメントつきで記載されているので時間がある時に読みたいと思います。
ここまでで、
/
├ hello.js
├ hello.test.js
└ karma.conf.js
失敗するのは分かっていますが、この状態でkarma startをしてみましょう。
No provider for "framework:mocha"! (Resolving: framework:mocha)
mocha使えるようにしてから出直して来いと言われます。
karma-mocha, karma-chaiのインストール
WARN [init]: Missing "karma-mocha" plugin. npm install karma-mocha --save-dev
と注意されましたよね。この注意にしたがったkarma-mochaをインストールします。
npm install karma-mocha --save-dev
ここでもう一度karma startをしてみます。
Chromeが立ち上がって成功したかとおもいきや…………惜しい。もう一つエラーが出ています。
ReferenceError: expect is not defined
expectなんてしらない。expect等のアサーションをmocha自身が持っていないからですね。
最後の仕上げとしてexpectのためにkarma-chaiをインストールします。
$npm install karma-chai --save-dev
インストール後に、karma.conf.jsを開いて、frameworksの所にchaiを追加しましょう。
frameworks: ['mocha', 'chai'],
ここまでで、
/
├ hello.js
├ hello.test.js
├ karma.conf.js
└ node_modules/
ところで、buster.jsはいつVer1がでますでしょうか？
stormborns
yousharknotpass
snowghoul
theartofmadeline
kaledo-art
andulkaphoto
vaporwave
areudirty