testemを使ったjavascriptテストの自動化
javascriptのテスト実行に、testemを使ってみました。
testem
testem は、テストランナーです。 https://github.com/airportyh/testem
大きな特徴は、3つです。
- 複数のテストフレームワーク(jasmine, mocha, QUnitなど)に対応
- Node.js、phantomJSの他、ブラウザ上での実行に対応
- Coffeescript, browserify などのプリプロセッサをサポート
インストール
npm を使用してインストールが可能です。(Node.jsが予めインストールされている前提です。)
npm install -g testem
設定ファイルの作成
testemの設定ファイル(testem.json)を作成します。
testem.ymlとすることもできますが、今回は、testem.json です。
{
"before_tests":
"grunt pre-spec"
,
"framework": [
"jasmine"
],
"src_files": [
"src/coffee/**/*.coffee",
"spec/coffee/**/*.coffee"
],
"serve_files": [
"spec/js/**/*.js"
]
}
- framework
- テストフレームワークを指定します。今回は jasmine を指定しました。
- src_files
- テスト対象のソースコードを指定します。ここで指定されたファイルを testem は監視します。
- coffeescript→js などの、プリコンパイルをする場合は、ここにコンパイル元のファイルを指定します。
- serve_files
- テスト実行時に使用するファイルを指定します。
- 'spec/coffee/**/*.coffee' をコンパイルして、'spec/js/**/*.js' を生成し、js ファイルをテストで使用します。
- before_tests
- イベントハンドラのひとつです。
- 記述しておくと、そのタイミングでコマンドが実行されます。
- テスト実行前に、coffeescript→js のコンパイルを実行する必要があるため、その grunt タスクを指定しています。
- プリプロセッサ対応の実態は、ここに適切にコマンドを指定することでできます、ということ。
テストの実行
テストコードと対象のコードを用意して、 testem コマンドを実行すると、はじめはこんなメッセージが表示されます。
TEST'EM 'SCRIPTS!
Open the URL below in a browser to connect.
http://localhost:7357/
Waiting for runners...
表示されているURLにアクセスすると、そのリクエストでテストが実行されます。
同時に、コンソールにも結果が表示され、こんな画面になります。(テストが1件の場合)
ブラウザを開いた状態で、 src_files で指定しているファイルを編集し、保存すると、テストが再実行されます。 (ブラウザもリロードされます。)
テストコードのファイルを追加すると、そのファイルも実行してくれるようになります。
※画像の背景に映りこんでいるのは、この記事の編集画面です。(/ . \);
