MochaとChaiでやるJavaScriptテスト

MochaとChaiでやる JavaScriptテスト
株式会社FLECT
小西俊司
2014/09/11

Mochaとは
JavaScript製のテストフレームワーク
HTML内での実行とコマンド実行の両方をサポート
非同期処理を同期化して順番に実行出来る
BDDスタイルとTDDスタイルの両方の記法をサポート
Assertionライブラリは含まれていないので自分で選択

Assertionライブラリ？
Assert系、Should系、Expect系など複数の系統がある
書き方が違うだけでやっていることは同じ
assert.equal(a, 5);
a.should.equal(5);//ObjectのPrototypeを拡張している
Expect(a).to.equal(5);
Assertだけでもライブラリ毎に多彩な書き方がある
assert.ok
assert.isObject
assert.match

Chaiとは
Assert、Shoud、Expectのすべてをサポートしたライブラリ
ただし実際に使用する場合は記法はどれかに統一した方が良い
多分既存のAssertionライブラリの中では一番多機能

インストール–HTML実行
mocha.js、mocha.css、chai.jsを参照可能なところにコピー
クライアントライブラリの取得はできるだけBowerを使用した方が良い
バージョン管理が楽になるので
jQuery等のメジャーなライブラリはブラウザのキャッシュを使うためにCDNを使うのもアリ
bower install mocha --save-dev
bower install chai --save-dev
cpbower_components/mocha/mocha.* public/test
cpbower_components/chai/chai.js public/test

インストール–コマンド実行
npmでインストール
mochaはコマンドを使用するのでグローバルインストールする
npminstall –g mocha
npminstall chai --save-dev

HTMLの書き方
Mochaとchai
それ以外に必要なJS
(テスト対象のJS)
BDDスタイル
テストのJS
テスト結果出力用のdiv(id=“mocha”)
テストの実行
(PhantomJSでも実行可能)

JSの書き方
FizzBuzzサンプル
ここではテスト対象のメソッドも
同一ファイル内に書いてあるが
本来はテスト対象は外部にある
BDDで使用するキーワードは
describeとitの2つ
★describe
単純なグループ化
複数ネスとしても良い
describe has some describes
and some its.
★it
テストケース
it has some asserts.
assertを使用する

非同期サポート
itのコールバック関数に
引数が宣言されている場合、
その引数に完了通知の
コールバック関数が渡される
その関数が実行されるまで
次のテストは実行されない
(デフォルトでは2秒で
タイムアウトする)

before(after), beforeEach
beforeはdescribe内で最初に一度だけ実行
beforeEachはdescribe内の各itを実行する前に毎回実行 (ネストしたdescribe内でも有効)
after、afterEachはその逆
itと同様に引数を宣言することで非同期処理の完了待ちが可能

タイムアウト
タイムアウト
デフォルト2000ms
コマンドラインオプション–tで設定可能
スロー判定
デフォルト75ms
コマンドラインオプション–s で設定可能
describeまたはitのコールバック内で個別に設定することも可能
this.timeout(5000);
this.slow(3000);

コマンド実行
テストの書き方はHTMLから実行する場合と同じ
requireでNode.jsの各種モジュールが利用できる
HTTPのエンドポイントのテストを全部これでできないかと実験中
テストシナリオを決めて
Http(s)モジュールでリクエストの実行とレスポンスの確認
Pgモジュールで更新されたデータを確認
Input, Output, Storageが検証可能なので多分良い感じ
画面操作の検証はSeleniumじゃないと無理

Http(s)モジュール
Node.js標準のhttpライブラリ
びっくりするぐらいRaw
Cookieを自分でセットしないとならない
POST文字列を自分でURLEncodeして組み立て
Content-TypeとかContent-Lengthの計算も自力
何故かデフォルトでChunked
ラッパーを開発中
jQuery#ajaxライクなdata引き渡し
レスポンス完了時のコールバック
Cookie等のHTTPヘッダも空気読んで追加
CSRFサポート

Pgモジュール
Windowsだとそもそもインストールが辛い
node-gypでインストール時にバイナリをコンパイル
Python 2.7が必要
Visual Studioのインストールが必要(Express版で良いので無償)
ていうかもはや開発者はMacを使うか、VMを使用するべき
そこを乗り切ればそれなりに使いやすいがやはりラッパーは必要
HTMLテストからは実行不可

PhantomJS
HTMLテストをブラウザなしでコマンドで実行できる
Mochaのテストを実行するためには以下のインストールが必要
PhantomJS
mocha-phantomjs(グローバル)
以降、mocha-phantomjsコマンドでテストが実行可能
★注意
PhantomJSでの実行は
Fileプロトコルでの実行になるので
JSやCSSの参照に「//」始まりや
絶対パスを使用してはならない

さらに自動化したい場合
Grunt
grunt-mocha(Client side. 要PhantomJS)
Grunt-mocha-test(Server side)
各種CIツール
phantomjsがあればなんとかなるはず

メール送信のテストも出来るかも
メールテスト用のサーバをHeroku上に作成するというアイデアをちょっと思いついた
例えば新規ユーザ作成時にメールでユーザの存在確認をするような処理
Mochaからユーザ登録のURLをキック
メールアドレスはSendGridのParseAPI宛にしておく
テストサーバが受信メールをフックしてキャッシュに保存
Mochaからはテストサーバのポーリング、またはWebSocket で完了待ち
メールは数分以上遅延することがあるのが難点
が、うまくすれば汎用的なものを作れる可能性はある
HerokuButtonで公開するアプリとしてちょうど良いかも

まとめ
周辺ツールを整備していけばかなり、汎用的なテストツールになる可能性はある
エンドポイントを叩くテストはある程度自動生成できると思う
テストしやすいエンドポイント設計をすることも重要
できるだけレスポンスはJSONにする
Seleniumでのテストやサーバサイドの単体テストが不要になるわけではない
が、必要なテスト数は減らせる

MochaとChaiでやるJavaScriptテスト

More Related Content

What's hot

Viewers also liked

More from Shunji Konishi

MochaとChaiでやるJavaScriptテスト