読者です 読者をやめる 読者になる 読者になる

Testem + Mocha + Chai で JavaScript のテスト

Rails アプリの JavaScript のテストは、 Konacha 使うのをやめて、Mocha を直接使っている。

Mocha は HTML サポートしているんで、 TestRunner.html 作ってブラウザで表示すればテストが実行され、 お手軽だ。

ただ、複数のブラウザでテストする場合、ブラウザを起動してまわらないといけない。 アプリやテストのコードを修正したら、当然ブラウザを更新して以下略。 ちょっとメンドイ。

メンドイと思ったときがツールの入れどき。 最近いろんなブログで見かけたテストランナー、Testem を導入することに決めた。

Testem インストール

Testem は Node で動くので、npm でインストール。

npm install -g testem

設定ファイル作成

プロジェクトルートに testem.json を作成し、Testem の設定を記述した。

{
  "framework": "mocha",
  "src_files": [
    "vendor/assets/components/underscore/underscore.js",
    "vendor/assets/components/backbone/backbone.js",
    "vendor/assets/components/backbone_rails_sync/backbone_rails_sync.js",
    "vendor/assets/components/hogan/web/builds/2.0.0/hogan-2.0.0.min.js",
    "vendor/assets/components/chai/chai.js",
    "public/assets/template.js",
    "public/assets/application.js",
    "spec/javascripts/spec_helper.js",
    "public/assets/tests.js"
  ],
  "launch_in_dev": [
    "Chrome"
  ]
}

使うテスティングフレームワークは Mocha。 Mocha にはアサーションライブラリがついていないので、Chai を一緒に使っている。

src_files に指定したファイルは、Testem が自動生成する TestRunner.html に埋め込まれる。 Mocha は Testem が提供してくれるので、それ以外のライブラリやテストコードを記述する必要がある。

あと、launch_in_dev で、Chrome が自動で起動するように指定。

テスト実行

ターミナルで

testem

を実行すると、Web ブラウザが自動で起動し、テストが実行された。

f:id:griefworker:20130722195307p:plain

ターミナルにもテスト結果が出力されていた。

f:id:griefworker:20130722195433p:plain

コードを修正して保存すると、Testem がそれを検知してブラウザをリロードしてくれる。 テストを書くのが捗るな。