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

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

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

以下に、自分がうまく作ることができた環境と実践方法を記しておく。

目標

TypeScript によるコードを、単体テストフレームワーク「jasmine」を使って単体テストできるようにする。

ただし、一般的な HTML によるテストランナー(を Web ブラウザで開いて実行)ではなく、コマンドラインからのコマンド実行や Visual Studio などの統合開発環境で統合されたテスト実行環境からの実行を目指す。

現時点での成果

現時点での成果としては、「Visual Studio などの統合開発環境で統合されたテスト実行環境からの実行」は達成できていない。

コマンドラインからのテスト実行は達成できたので、以下にその詳細を綴っていく。

事前の環境構築

• 「node.js」実行環境と、node.js のパッケージマネージャ「npm」コマンドをインストールしておく
• コマンドプロンプトにて npm install -g jasmine を実行し、jasmine コマンドをインストールしておく

テストプロジェクトの立ち上げ

コマンドプロンプトにて、作業フォルダに移動し、「jasmine init」を実行。
作業フォルダ下に「spec」フォルダが出来上がる。

続けて、jasmine を使ったテストコードを TypeScript で書く。
その TypeScript コードは「spec」フォルダ以下に、「～Spec.js」という JavaScript ファイルが生成されるように書き、JavaScript にコンパイルする。

※このフォルダ構成やファイル名の制約は、「jasmine init」コマンド実行によって作成された、既定の ./spec/support/jasmine.json に記載された構成に依るものである。

もちろん、jasmine.js に対する TypeScript 型定義ファイル「jasmine.d.ts」を、tsd コマンド等をはじめ適当な手段によって、作業フォルダ以下 (「./typings/jasmine/jasmine.d.ts」といったように) に配置しておき、テストコード TypeScript 内にて

/// <reference pah="../typings/jasmine/jasmine.d.ts" />

というように参照情報を記述しておくことで、コンパイルが正常実行できるようにし、加えて、エディタによるコード補完やリアルタイムエラーチェックといった支援を受けられるようにしておく。

なお、TypeScript を JavaScript にコンパイルするにあたって、
外部モジュール形式は「CommonJS」形式
を指定してコンパイルすること。

Visual Studio を使ってテストコード TypeScript を書く場合は、何かしら TypeScript プロジェクトを作り、プロジェクトのプロパティにて TypeScript コンパイルオプション設定の画面を開き、ここで外部モジュール形式として「CommonJS」を選択しておく。

ここまでのテストコード TypeScript の例は以下のとおり。

./spec/myLibSpec.ts(.js)
/// <reference path="./typings/jasmine/jasmine.d.ts" />

describe("myLib",() => {

  it("test1",() => {

    // TODO:

  });

});

別途開発中であろうテスト対象の TypeScript コードだが、(TypeScript用語における) 外部モジュールとして外(今回の例では、テストコード)からインポートできるよう、
(TypeScript用語における) 内部モジュールに対し export キーワードを付けておく。

例えば以下のような myLib.ts を想定する。

./lib/myLib.ts(.js)
export module myLib {

  export function sum(a,b){

    return a + b;

  }

}

テストコードにおいて、このようなテスト対象の TypeScript コードを、(TypeScript用語における)外部モジュールとしてテストコードからインポートする。

/// <reference path="./typings/jasmine/jasmine.d.ts" />

import m1 = require('../lib/myLib');



describe("myLib",() => {

  it("test1",() => {

    // TODO:

  });

});

外部モジュールを受け取る名前、上記例の「m1」は好みで何でもよい。
このインポートした外部モジュールの中に、内部モジュール「myLib」が生息していることに注意。

あとは、外部モジュールインポートした対象コードに対するテストを記述するだけだ。
(import 文により、エディタによる支援も効く)

/// <reference path="./typings/jasmine/jasmine.d.ts" />

import m1 = require('../lib/myLib');



describe("myLib",() => {

  it("test1",() => {

    expect(m1.myLib.sum(1,2)).toBe(3);

  });

});

実行

コマンドプロンプトから作業フォルダにて「jasmine」コマンドを実行すればよい。

C:\work> jasmine

Started

.





1 spec, 0 failures

Finished in 0.008 seconds

以上!

補足1)
jasmine.js は jasmine コマンド実行時に処理系に正しくロードされているようで、作業フォルダ以下に自分で jasmine.js を格納しておく必要はない。
ただ、今回は TypeScript でテストコードを記述するので、型定義ファイル(jasmine.d.ts) だけは参照できる場所に必要であった。

補足2)
UTF-8 エンコードのもと、日本語文字列リテラルを含むテストコード/対象コードも正しく扱える。
suite名、spec名も、日本語文字列で書ける。

補足3)
jasmine コマンドによるテスト実行のプロセスは node.js だと思われる。
なので、Web ブラウザや HTML DOM をいじるようなコードのテストは実行できない。
実際、テストコード中で「console.log(document);」と記述しておいて jasmine コマンドを実行すると、「document は undefine だ」という例外になる。

補足4)
Visual Studio 2013 Community Edition に「Chutzpah Test Adapter for the Test Explorer」 アドインを導入することで、Visual Studio 備え付けのテストエクスプローラを経由して jasmine による単体テストを実行できる。
ただし現時点で以下の問題にぶつかり、解消できていない。

1. .ts ファイルを保存したりするごとに、テストエクスプローラがテストコードを検出するまで、数十秒の間、コードの走査(スキャン)で待たされる。とても TDD できる環境ではない。原因は探っていないが、毎回、TypeScript のコンパイルが実行されているように見え、それが原因かも。
2. テスト対象のコードをどうにも取り込めなかった (テスト実行時に、"myLib" などというものは undefined だ、というエラーになってしまう)。ただしこれは単に「Chutzpah Test Adapter」の流儀・仕掛けをよく理解してないことが要因だと思う。