続・TypeScript + jasmine による単体テスト実行環境の構築と実践

注意 - 本記事の内容は古いです。後日の記事 「せっかく Gulp に乗り換えたので、Grunt でやってた単体テスト実行も乗り換えちゃう」の参照をお勧めします。

CommonJS モジュール構成では Web で使いにくい...

以前、CLR/H カフェ #2 を主催し、TypeScript によるコードを単体テストフレームワーク「jasmine」を使って単体テストする環境作成と実践にチャレンジした顛末をブログ記事に投稿した。

しかし前回投稿の内容、すなわち Node.js の jasmine パッケージによる jasmine コマンドでのテスト実行環境だと、ひとつ、最大の難点があった。

すなわち、テスト対象の TypeScript/JavaScript コードが CommonJS に基づくモジュール構成となっている必要があるのだ。

Node.js 上などでコンソールやサーバー側で実行されるような JavaScript コードであれば、当然のごとく CommonJS に基づくモジュール構成で実装することだろうから、このことが問題にはならない。

しかし、Web ブラウザ上で実行する JavaScript コードは (Browserify などを用いる場合を除き) 通常は CommonJS のようなモジュール構成は書かけない。
これが問題である。

例えばである。
Web ブラウザ上で実行する JavaScript コードとして app.js を書いていて、その app.js の中で myLib.js の中で定義されている関数を呼び出しているとするだろう。

このような場合で、前回投稿の環境で app.js を単体テスト対象にするためには、app.js の中で、

var myLib = require('myLib');

と記述して、依存先である myLib.js もテスト実行環境に読み込む必要がある。

しかしクラシカルな Web ブラウザ上で実行するコードとしては、require などという関数やキーワード、仕組みはない。
このような app.js ファイルを Web ブラウザに読み込ませる HTML 中の script タグで読み込んだとしても、当然
「require ってナニ?」
というエラーになってしまうのである。

ここで Browserify やその他同類のツールを使って、CommonJS モジュール機構に基づいて書かれた .js ファイル群を "コンパイル" し、Web ブラウザ上で読み込み・実行可能な単一 .js ファイルを生成する、というやり方もできるだろう。

しかしさらなる問題もある。

さらなる問題 - DOM がないので AngulaJS とか使えない

jasmine コマンドは Node.js を JavaScript 実行環境として動作するため、Web ブラウザ上で動作するのとは違い、AngularJS のような "window" とか "document" などの HTML DOM 要素にアクセスする JavaScript コード (に依存したコード) を実行できないのだ。

これは jasmine コマンドが悪いわけではなく、テスト対象が違う（自分は Web ブラウザ用のコードを書いているのに、jasmine コマンドは Node.js で動くコードを対象としてる）のに、無理くり使おうとしてることによる問題である。

Grunt による環境構築に方針変更

以上を勘案して、このたびは、前回投稿の jasmine コマンドによる環境はいったん捨てて、CommonJS も AMD もなんのモジュール機構も使わない、クラシカルな、Web ブラウザ上で実行するコードをテストする環境を構築し直すことにした。

ということで、ここは JavaScript によるタスクランナーの大御所、Grunt ならば、Jasmine による単体テスト実行タスクも存在するのではないかと予想を立てた。

「grunt jasmine」で検索してみたところ、予想は的中。
ズバリ「grunt-contrib-jasmine」を導入すれば Grunt で "jasmine" というタスクが使えるようになり、望みのテスト実行環境が作れるとのこと。

ありがたいことにわかりやすい記事も多数見つかった。

Google 検索結果「grunt jasmine」
https://www.google.co.jp/search?q=grunt+jasmine

テストは非表示なブラウザ上で実行される

「grunt-contrib-jasmine」のもうひとつの利点は、"ヘッドレス" ブラウザ ( GUI を持たず、表示デバイスに描画することのない特殊なブラウザ ) である PhantomJS が依存パッケージとして同時に自動インストールされ、この PhantomJS 上で Jasmine によるテストを実行する、ということ。

ヘッドレスとはいえ、JavaScript コードからしてみたら、普通の Web ブラウザとなんら違いはわからない PhantgomJS 上で実行されるわけで、当然、jQuery やら AngularJS やら、DOM を参照する JavaScript コードも読み込み実行できる。

詳しい説明は「grunt-contrib-jasmine」の GitHub プロジェクトサイトに掲載の公式ドキュメントに譲るが、テスト対象やテストコード(スペック) の .js ファイル、その他各種依存先の .js ファイルは、Grunt への指示書である Gruntfile.js に、それら .js ファイルのパスをワイルドカードなど交えながら記載する仕組みである（なので、モジュール機構に依らない）。

既存のネット上の解説記事と重複することもあり、ここでは詳細は割愛する。
代わりに、自分なりに gist (下記) に環境構築手順をまとめたので参照されたい。

https://gist.github.com/jsakamoto/5536cc58edd2902fb618

Visual Studio 環境との統合

上記 gist にはさらに、Visual Studio で開発作業を行ってる場合に、さらなる統合を行う環境構築についても記述してある。

自分は上記 gist に掲載の環境構築を果たしたことで、今では、
Visual Studio 上でテスト対象やテストコードの TypeScript ファイルを編集して Ctrl + S で保存(※) したら、
続けて Ctrl + R, Ctrl + J を打鍵するだけで即座にテストが実行され、
結果は Visual Studio の出力ウィンドウに表示される
ようになった。

※ Visual Studio の既定の構成であれば、.ts の保存時に .js へのコンパイルも同時実行される

まとめ

紆余曲折あったが、最終的にはこうして、 Visual Studio 上での快適な単体テスト実践環境を作ることができた。

ただし、
「テスト失敗時、Visual Studio 出力ウィンドウに表示されるスタックトレースをダブルクリックしたら、該当行を Visual Stuio で開く」
仕組みがまだない、など、改善の余地はまだ残されている。