2015-01-11 ユニットテストにpower-assertを使う

今までJavaScriptでのユニットテストではexpect.jsを使っていたのだけど、 TDDやライオンで有名なtwadaさんのpower-assertが以前から気になっていて、つい先日ブラウザ版がIE8に対応したらしく、試しにdeepcopy.jsで使ってみた。

初めての導入で、若干つまづいたところや勘違いしていたところがあったのでメモ。

power-assertについて

power-assert自体は単なるアサーションライブラリ。

勘違いしていたのだけどpower-assertのリポジトリのREADME.mdにある、テストが失敗した時の詳細な出力はpower-assertを使っただけでは表示できない。

espower-cliなどテストコードを変換する必要がある。

node.js

node.jsでテストする場合に必要な作業。

モジュールのインストール

インストールが必要なモジュールは以下の通り。テストフレームワークはmochaを使うのでそれもインストールする。

power-assert
intelli-espower-loader

intelli-espower-loaderはon the flyでテストコードを変換してくれるモジュール。

package.jsonの編集

package.jsonを編集する。

"directories": {
  "test": "test/"
}

上記を追加する。テストコードが配置されているディレクトリを指定するのだけど、"test/"でないといけないようで"./test"では駄目な模様。

test/mocha.optsの編集

test/mocha.optsを編集する。test/mocha.optsを使用していない場合はmochaに渡すオプションをコマンドラインで指定する。

--require intelli-espower-loader
--reporter spec
--ui bdd

intelli-espower-loaderをrequireするように記述する。reporterやuiは好みのものを選択して記述する。

browser

ブラウザでテストする場合に必要な作業。

ライブラリのインストール

インストールが必要なライブラリはpower-assertとmochaのみ。bowerからインストールできる。

bower_components/power-assert/build/power-assert.js
bower_components/mocha/mocha.js
bower_components/mocha/mocha.css

が必要。これらをテストページで読み込む。

テストコードの変換

deepcopy.jsは1ファイルなのでespower-cliで変換した。

Gruntやgulp向けのespowerモジュールもあるので、ファイル数が多い場合やリポジトリでそれらを使っているならそれを使うと良い。

$ npm install espower-cli
$ ./node_modules/.bin/espower test/test.js > test/test.pwr.js

あとはブラウザ向けに記述したmochaのテストページに変換したテストコードを読み込ませれば良い。

テストページは以下のようになった。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bower_components/mocha/mocha.css">
    <title>deepcopy.js</title>
  </head>
  <body>
    <div id="mocha"></div>
    <script src="../bower_components/power-assert/build/power-assert.js"></script>
    <script src="../bower_components/mocha/mocha.js"></script>
    <script>
      mocha.setup('bdd');
    </script>
    <script src="../deepcopy.min.js"></script>
    <script src="./test.pwr.js"></script>
    <script>
      mocha.checkLeaks();
      mocha.run();
    </script>
  </body>
</html>

これをブラウザで開けばテストが開始される。

参考

5minで分かるpower-assert

とても簡潔にまとまっていて良かった。

テストが失敗した時の出力がわかりやすくなって良かった。

それと、power-assertを使うことによりテストコードが書きやすくなった。というのも、assert()とassert.deepEqual()とassert.doesNotThrow()くらいしか使わないようにしたからで、 expect.jsではto.eql()だったりto.be()だったり比較する対象を意識してメソッドを変えないといけなかったので面倒だった。

以前、どこかで読んだのだけど、テストコードが英語の文章っぽく読めても日本人にはそれほど嬉しくない、というのが分かった気がする。というか、文章っぽくするためにやたらと多いメソッドを覚えないといけないのはあまりよろしくないと思う。

power-assertは変換の手間がありつつも、テストが失敗した時の値が見やすいのでとても良いと思った。これからJavaScriptでテストを書くときはpower-assertを使うと思う。

追記

power-assertがIE8に対応した、というのは単体で対応していると思ったのだけど試してみたところ動作しなかった。 es5-shimを先に読み込めばIE8に対応できた。