前回までで、超簡単ではありますがwebpackを使ったフロントエンドの開発環境ができあがりました。ここいらで、ブラウザから一旦離れて、テストにスポットを当ててみます。
ところで、テストとブラウザの画面でのチェック、両方大事ですよね。ユニットテストとかテスト駆動開発とか色々言われているようですけど、僕は両方大事にしたいな、と思う派です。テストフレームワークを用いたテストの自動化も大事だし、効率と無関係に「きちっとブラウザでチェックする」というのも大事だし。
ともかくテスト。最初の方針のとおりテストはmocha+power-assert+karmaの組み合わせでいきます。mochaはRSpecに似たDSLでテストを記述するためのフレームワーク。テストはこのmochaのDSLに従って書きます(もちろんcoffeeで)。power-assertはNodejsのassertモジュールをより一層強化した名前通りpowerなassertを提供するモジュール（ルー大柴みたいですが）。assertionに失敗した時に威力を発揮します。karmaはテストを実行するフレームワーク。Chrome, Safari, IE, Opera, そしてPhantomJSなどなど、多くのブラウザ上でテストを自動的に実行してくれます。
なんだか関連人物が多くて混乱しそうですが（僕はかなり混乱しました）、整理しながらいきます。取りまとめるのはwebpackです。
まずは、全部インストールを済ませてしまいましょう。
まずはmochaのインストール：
%npm i -D mocha
次にpower-assertと、それに関連するパッケージのインストール：
%npm i -D power-assert webpack-espower-loader json-loader
webpack-espower-loaderとjson-loaderは、webpackでpower-assertをサポートしたテストコードをバンドルする際に必要です。(webpack-espower-loaderは現時点でβバージョンだそうです)。なおjson-loaderも必要です。
次にkarma（とPhantomJS）と関連するパッケージのインストール：
%npm i -D karma karma-mocha karma-phantomjs-launcher phantomjs-prebuilt karma-webpack
karma-mochaはkarmaからmochaベースのテストを実行するためのkarmaプラグイン。karma-phantomjs-launcherはPhantomJS上でテストを実行するためのkarmaプラグイン。phantomjs-prebuiltはnpm経由でPhantomJSをインストールするためのパッケージ（すでにインストールされている場合は不要です）、karma-webpackはwebpackをkarmaから利用するためのkarmaプラグイン。
karma-phantomjs-launcherはPhantomJSのインストールも込みでやってくれるので、ちょい時間がかかります。そもそもnpm iはいつも時間がかかるものですが。
やたらパッケージを入れなきゃならないのが面倒臭いですね。なんとかならんのか！と言いたくなりますが、フロントエンド開発の世界は、本当につくづく現在進行形なのでしょう。巨大なプロジェクトの中で整然と開発が行われるのではなくて、ダイナミックで自由気ままに世界中で開発が進んでいる、そんな印象を受けます。なにか一つ入れれば全部面倒見てくれる、というものではないんだなと、一旦この状況を受け入れるのがいい気がします（そしてそれがいいんじゃないかと）。話は逸れますが、今後紹介しようと思うautoprefixerなんて、その最たるもんじゃあないかと思ったりします。すごいですよ、autoprefixer。
これで、とりあえず環境は整った感じです。次回、実際にテストを書いて動かしてみます。
