最近になって JavaScript を勉強中です。
ES2015 と React にもちょっとずつ慣れてきましたが、テストについては Karma とか mocha とか名前は聞くけど何が何なのかよくわかってなかったので、軽く整理してみます。
JavaScript テストツールの大まかなカテゴリ
JavaScript のテストツールは、だいたい以下のようなカテゴリに分類することができます。
以下、それぞれについての説明と、代表的なライブラリを見ていきます。
★は個人的にこれを使おうかなと思ったやつです。
1. アサーションライブラリ
テストの一番重要な部分である、「A は B である（assert A === B）」を検証する（ためのメソッドを提供する）ライブラリ。
代表的なものとして、以下があります。
Node.js の標準 assert
Node.js 自体にも assert モジュール があるようです。
expect.js
- Redux の examples のテストで使われているのはこれ
- メソッドとしては
expect()のみ
chai
- mocha の Introduction で使われているのはこれ
- メソッドとしては
should(),expect(),assert()がある
★ power-assert
- テスト界隈で有名な t_wada さんが開発したライブラリ
- 厳密に言うとアサーションライブラリではないらしい
- メソッドとしては
assert()のみ - Node の assert と比べ、テスト結果として出力される情報がわかりやすい
- 参考：5minで分かるpower-assert
2. テストフレームワーク
テストを実行するためのツール。
テストフレームワークに従った書き方でテストを書き、実行するとテスト結果を確認することができる。
代表的なものは以下。
★ mocha
- Redux の examples のテストで使われているのはこれ
- テストスイートに相当するものを
describeで、テストメソッドに相当するものをitで書く - サンプル
import { expect } from 'chai'; import add from './my-add-function'; describe('add() の機能', () => { it('1 + 1 は 2 になる', () => { expect(add(1, 1)).to.equal(2); }); it('負の数も扱うことができる', () => { expect(add(-1, 1)).to.equal(0); }); });
- アサーション部分の機能は mocha 自体は持ちあわせていないため、別途アサーションライブラリをインストールする必要がある
- 参考：テストフレームワーク mocha - hokaccha hamalog v3
Jasmine
- AngularJS の標準テスティングフレームワークらしい
- Babel と組み合わせるのがつらいというのを目にした
- 参考：Setting Up JavaScript Testing Tools for ES6 | X-Team
- 使ったことがないので、詳細は不明
- ちょっと前まで流行ってたけど、最近聞かない気がする（個人的な感想）
3. テストランナー
先ほどのテストフレームワークだけでもテストを実行することが可能ですが、
テストランナーを使うと様々なブラウザ環境でテストを実行させたり、テスト結果やカバレッジを見やすい形式で出力することができるそうな。
代表的なものは以下。
★ Karma
- mocha と組み合わせて...という記事が Qiita とかでよく見かける
- 参考：Karma for JavaScript test runner - blog.koba04.com
testem
- 名前だけ聞いた。現在も流行っているのかどうか不明
番外編
上記の3カテゴリにはあてはまりませんが、それ以外に有名なライブラリをいくつか。
これらはいずれも以下の記事で紹介されており、一通り読むとどんなものか知ることができます。React のテストの書き方を学ぶ上でも大変良い記事です。
Sinon.js
- テストスパイやモック／スタブを作るためのライブラリ
- スパイとは「関数がどのように呼びだされたかを記録するもの」らしい
- スパイ・モック・スタブなどを総称して「テストダブル」と呼ぶらしい
- 参考：JavaScriptでスパイ、スタブ、モックなどのテストダブルを行う (1/3)：CodeZine（コードジン）
（React 限定）Enzyme
まとめと TODO
調べる前はなんでいろんなものを組み合わせて使う必要があるのかわかってませんでしたが、それぞれ役割が異なるんですね。
各ツールについてはなんとなく理解できたので、
次は実際に karma + mocha + power-assert という組み合わせで、ES2015 で書いた React/Redux アプリのテストを書いてみようと思います。
リファレンス
- JavaScriptのテスト環境構築(Mocha + power-assert + Karma + babel + webpack) - Qiita
- まだ読んでない
- 今後、実際にテスト環境を構築する上で参考になりそうな記事
![ドキュメント作成システム構築ガイド[GitHub、RedPen、Asciidoctor、CIによる モダンライティング]](https://m.media-amazon.com/images/I/516v0w26krL._SL500_.jpg "ドキュメント作成システム構築ガイド[GitHub、RedPen、Asciidoctor、CIによる モダンライティング]")
