dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

ES2015時代のJavaScriptテストツールまとめ

Frontend まとめ

最近になって JavaScript を勉強中です。
ES2015 と React にもちょっとずつ慣れてきましたが、テストについては Karma とか mocha とか名前は聞くけど何が何なのかよくわかってなかったので、軽く整理してみます。


JavaScript テストツールの大まかなカテゴリ

JavaScript のテストツールは、だいたい以下のようなカテゴリに分類することができます。

  1. アサーションライブラリ
  2. テストフレームワーク（テスティングフレームワーク）
  3. テストランナー

以下、それぞれについての説明と、代表的なライブラリを見ていきます。
★は個人的にこれを使おうかなと思ったやつです。


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);
  });
});
Jasmine


3. テストランナー

先ほどのテストフレームワークだけでもテストを実行することが可能ですが、
テストランナーを使うと様々なブラウザ環境でテストを実行させたり、テスト結果やカバレッジを見やすい形式で出力することができるそうな。

代表的なものは以下。

★ Karma
testem
  • 名前だけ聞いた。現在も流行っているのかどうか不明


番外編

上記の3カテゴリにはあてはまりませんが、それ以外に有名なライブラリをいくつか。
これらはいずれも以下の記事で紹介されており、一通り読むとどんなものか知ることができます。React のテストの書き方を学ぶ上でも大変良い記事です。

Sinon.js
（React 限定）Enzyme


まとめと TODO

調べる前はなんでいろんなものを組み合わせて使う必要があるのかわかってませんでしたが、それぞれ役割が異なるんですね。

各ツールについてはなんとなく理解できたので、
次は実際に karma + mocha + power-assert という組み合わせで、ES2015 で書いた React/Redux アプリのテストを書いてみようと思います。

リファレンス