Mochaとchaiを使ってJavaScriptのフロントエンドテスト環境の構築


今更ですが、Arctic.jsのメンテを少しずつしていこうと思ったものの、そもそもテストがなかったので(アリエナイ。。)テスト環境の構築から始めてみました!

しばらくJavaScriptの開発を離れている間にテスト環境も多様なものが出て来たようで、何を選んだらいいかわからなかったのですが、@naoya_itoさんの資料の図が非常に分かりやすかったです!

Jasmineは以前node.jsを用いた開発で利用していたので、今回は話題のものを試すべく、テスティングフレームワークにMocha、アサーションライブラリにchaiを使ってみようと思います。

 

Mochaのinstall

MochaはJavaScriptのテスティングフレームワークで、ブラウザを利用したフロントエンドのテスト、node.jsを利用したテストの両方をサポートしています。

今回はブラウザを利用したフロントエンドのテストについて説明します。

ブラウザを利用したテストを行うには、ここのmocha.jsとここのmocha.cssをダウンロードします。

 

Chaiのinstall

Mochaはテスティングフレームワークのみですので、値を比較するためのアサーション機能は別のライブラリ等を用いる必要があります。

選択肢はいくつかありますが、今回はchaiを利用してみます。

ブラウザを利用したテストを行うので、ここからchai.jsをダウンロードします。

 

ブラウザ表示用htmlの用意

テスト結果確認用のhtmlを用意します。

ここでは、先ほどダウンロードしたmocha.css、mocha.js、chai.jsを読み込んでテストのセットアップを行います。

テストコード

上記コードで読み込んでいるtest.jsの中身です。このように記述し、Arctic.jsのImageクラスをテストします。

 

 テストを実行してみる

では先ほど用意したhtmlをブラウザで開いてみます。

すると以下の様にテスト結果が表示されます。

遅い部分は2番目のテストの様に強調して表示されます。とてもわかりやすいですね。

mocha_test

 

これからPhantomJSとかも使いこなしてみたいですね。