IDEプラグイン型の自動テストツール「Wallaby.js」を導入してみた

Wallaby - intelligent test runner for JavaScript, TypeScript, and CoffeeScript

BCCKSの組版エンジンに安定性と大規模な拡張が同時に求められる局面が生じてきたのでちゃんとテストを書いてからいじるようにしようとjsのテストフレームワークやら自動テスト環境やらを調べていたら、Intellij系のIDE(やVisual StudioとAtom)向けのプラグインとして提供され、テストのパス状態や結果がエディタのコード上に完全なかたちで統合されるというツール「Wallaby.js」を見つけたので導入してみた。1ライセンス$100でまあちょっと高いなと思うけど、1日使ってみてこれはテストうんぬんより開発ツールとして非常に便利なので確実に定着するしすでに誰かにオススメしたい感じがしている。

僕が使っているのはIntellij IDE(PhpStorm / Intellij IDEA)なのでIntellij プラグイン版のみの評価になる(Atomプラグイン版もどんな感じなのか気になるけど)。もともとIntellijのIDEには標準でもテストランナープラグインが提供されていて、それを使ってみるつもりでいろいろ調べていたんだけど、ブラウザjsのテストはjsTestDriverを起動してからブラウザを起動しないといけなかったり、いまいち乗りきれない感じがあった。Wallabyはプラグインにヘッドレスブラウザ(PhantomJS)が完全に隠蔽された形で統合されていて、テストフレームワークのインストールと設定(テスト対象のソースとテストソースの定義)をすれば実行過程のことはなにも気にしなくてもテストが実行されるようになる。導入が楽。

テスト結果のエディタ統合も想像した以上の完成度で、テスト側のソースの各行にカラーチップでテストのパス状態が信号のように表示されるのはもちろん、テストするソース側も現在のテストスイートでの各行のカバレッジ状態がやはりカラーチップで表示されるので、テストがぜんぜんないコードにテストを足していく今回のような場合でもモチベーションを上がりやすいし、キーになるロジックのテストを先に書こうといった判断もしやすい。コード修正後の反映パフォーマンスもまったく問題ない(これはまだテストが少ないせいかもしれないけど)。

Wallaby.jsのサイトからアニメgifを引用

さらに体験してみて眼からうろこが落ちたのは、Wallabyの環境だとほんとうに「テスト駆動開発」ができるということ。Wallabyプラグインはテストの状態だけでなく、テスト実行時の各行での出力やエラー内容もインラインで表示される(Chromeのjsデバッガのステップ実行状態とおなじ感じ)。コードにconsole.logを追記すれば即座にそのブロックに関するテストが実行され、出力された変数の値がインラインに表示される。Wallabyの環境でテストが書かれた環境でコードを書くと、まさにテストというエンジンに接続された動いているプログラムを動いたまま触っているような感覚で開発ができる。あまりテストツールをさわったことがないので他のツールでもできることなのかもしれないけど、これは新鮮だった。

なにしろきのう導入したばかりなのでもうちょっと使ってみないとわからない部分もあるけど(テストが増えるとどうなるかとか)、現時点ではWallabyによってコーディングの進めかた自体が変わりそうな気がしている。