QUnitとReSharper

0.前置き

ASP.NET MVCでのビューを開発する際や、Win8のメトロスタイルアプリを開発する際において、
JavaScriptの重要性がどんどん高まっています。
今までなんとなしに逃げてきたJavaScriptですが、本格的に取り組まなくてはいけません。
今回はそんなJavaScriptの開発におけるコンポーネントテストの方法をまとめておこうと思います。
普段仕事でReSharperを使っているので、ReSharper+QUnitの組み合わせでのテスト方法を簡単にまとめます。

1.それぞれのツールの紹介

QUnitとは
QUnitはもともとjQuery開発のために作成されたテスティングフレームワークです。
いまやjQueryへの依存がないため、JavaScriptのテスト一般に利用可能です。
ドキュメントは、こちらにあります。

ReSharper
ReSharperはVisualStudioのアドオンです。
開発生産性向上ツール？とでも言うのでしょうか。
コーディング支援、リファクタリング支援、コンポーネントテスト支援などなど多くの機能を搭載しています。
開発している会社は、JetBrainsで最新バージョンは6.1です。
詳しい情報は、こちらからどうぞ。

2.インストール

※ReSharperのインストールの話は省きます。
ReSharper（Ver.6以降）が入っていれば、QUnitのインストール作業は不要です。
ReSharperがビルドされた際には最新のQUnitが組み込まれているようです。
設定も特にないです。オプションにQUnitのテスト結果を表示するブラウザーを設定するぐらいです。

3.実際に使ってみる

3-1.テスト対象のJSファイルを作成する

calculate.jsとして、以下のコードを作成しました。

function add(x,y) {
    return x + y;
}

function substract(x,y) {
    return x - y;
}

function muliply(x,y) {
    return x * y;
}

3-2.テストを行うJSファイルを作成する

test/calculate.test.jsとして以下のコードを作成しました。

//↓ReSharperにテスト対象のコードを教えてあげます。
/// <reference path="../calculate.js"/>

//↓個々のテストメソッドをグループ化します。(QUnitの構文)
module("Calculator tests");

test("SumTest", function() {
    var result = add(2, 3);
    equals(5, result, "Sum of 2 and 3 is 5");
});

test("SubstractTest", function() {
    var result = substract(5, 1);
    equals(4, result, "Substracting 1 from 5 gives 4");
});

3-3.テストを実行する

*1. テストを実行する*
テストモジュールや、テストメソッドの左にテスト実行マーク（ReSharperの機能）が出るので
これを選択して実行します。

*2.Visual Studio上でテスト結果を確認する*
Visual Studio上で結果は確認できます。

*3.QUnitの標準の方法でテスト結果を確認する*
もちろんQUnit標準の方法で結果を確認することができます。

4.サンプルを書いてみての補足

QUnitの標準の方法ですと、テスト結果を表示するHTMファイルを作成する必要があります。
しかし、ReSharperを用いる場合は必要ないです。ReSharperがテスト実行時に勝手に作ってくれます。

5.サンプルコード

サンプルコードはgithubにホスティングしてあります。
QUnitのサンプル
テストコード本体

6.最後に

MsTestと同じ手法でコンポーネントテストを実施できるのは魅力的ですね。