要望

自作のjQueryプラグインの単体テストをしたい。
DOMと密接に結びついているので、JSファイル単体ではなく、HTMLファイル全体としてテストしたい。
ブラウザとコマンドラインの両方でテストしたい。
カバレッジも取得して、結果をHTMLに出力したい。

実現

簡単な例をGitHubで公開しています。

JavaScriptのみ: https://github.com/sutara79/demo-qunit
PHPも一緒に: https://github.com/sutara79/jq-plugin-template

(フォーク元 https://github.com/thorst/Code-Coverage-Qunit )

ブラウザで実行

https://sutara79.github.io/demo-qunit/test/
ユニットテストのみ、可能です。

コマンドラインで実行

カバレッジも同時に測定し、HTMLに出力します。

$ npm test

> demo-qunit@0.0.1 test /path/to/folder
> grunt qunit

Running "qunit:files" (qunit) task
Testing test/index.html .OK
>> 3 assertions passed (66ms)
>> Coverage:
>> -  Lines: 100%
>> -  Statements: 100%
>> -  Functions: 100%
>> -  Branches: 100%

Done.

しくみ

QUnitでテストして、Istanbulでカバレッジを測定・出力します。
コマンドラインでテストするためにPhantomJSを使います。
全体をGruntで管理しています。

GitHubにプッシュすると、TravisCIでテストしてCoverallsでカバレッジを測定し、READMEのバッジに反映されます。

QUnit 1.x系を使う理由

QUnitの最新版は2.x系ですが、依存パッケージのgrunt-qunit-istanbulでは対応していないようです。
フォーク元の依存パッケージのバージョン指定が古かったので更新してみましたが、grunt-qunit-istanbul だけは最新版にできませんでした。

パッケージ	フォーク元	私	最新版(2017年4月現在)
grunt	0.4.2	^1.0.1	1.0.1
grunt-coveralls	0.3.0	^1.0.1	1.0.1
grunt-qunit-istanbul	^0.4.0	^0.6.0	1.0.0

grunt-qunit-istanbul の最新版1.0.0のソースコードの一部を修正したらQUnit2.x系が動作するようになりましたが、それでも原因不明の不具合が発生するので諦めました。
一応、プルリクエストを送っています。
私の変更を適用すると、古いNode.jsではエラーになるようですが…。
https://github.com/asciidisco/grunt-qunit-istanbul/pull/68

他に試したこと

Mochaを使いたかったのですが、どうしても私の要望通りになりません。
いろんな記事を参考にしましたが、下記のような失敗ばかりでした。

ブラウザではテストもカバレッジ測定もできるが、コマンドラインでカバレッジを取得する方法が分からない。
JSファイル単体ならばコマンドラインでテストもカバレッジ測定もできるが、jQueryやHTMLと結びついた状態で実行する方法が分からない。

結局、他の方が作ったベアボーンを利用させてもらおうと考え、上述のリポジトリにたどり着きました。