JavaScriptライブラリ開発時の結合テストの方法

Question

JavaScriptライブラリ開発をしています。
結合テストで、作成したライブラリが複数のブラウザできちんと動作するかを確認したいです。

この場合どのように結合テストを行うのが適当なのでしょうか。

私が想定しているのは、以下のような方法です。

1. ライブラリ開発を行っているリポジトリとは別のリポジトリにテスト用のプロジェクトを立てる。
2. そこで開発中のライブラリを含む（ライブラリはGitHub Packegesなどでプライベートで配信しておく）サンプルアプリを作成し、ベーシック認証付きでテストサーバーにデプロイする。
3. TestCafeなどのツールを使って、テストコードを書く。（テストコードの管理はサンプルアプリの方のリポジトリで行う。）
4. 複数のブラウザでテストを実行する。

普段からJavaScriptライブラリの開発を行ってらっしゃる方々はどのように結合テストを行っていますでしょうか？結合テストコードの管理方法や使っているツール、Tipsなどございましたらご教授いただけますと幸いです。

Comments

[yamap55]

回答付いてないので書いてしまいます。
ライブラリを開発しているのであれば、ライブラリは結合する必要はないのでは？サンプルアプリとの結合をしてどういう意味があるのでしょうか？
具体的にはどのようなテスト、何を確認するためのテストを行いたいのでしょうか？

[kazuki__]

具体的にはライブラリの機能を全て網羅するようなブラックボックステストを複数のブラウザで行って、仕様通りに動作するかを確認したいです。
サンプルアプリは通常のサービスとして機能するようなものではなく、ただ単に機能確認をするだけの簡素なものを想定しています。

> ライブラリを開発しているのであれば、ライブラリは結合する必要はないのでは？
結合テストを行わない場合、どのようにして品質を担保しているのでしょうか？今回ライブラリ作成は初めてなもので、どのようにテストを行うべきかがわかっていません。一般的にはどのようにテストを行っているのかご教授いただけないでしょうか。
よろしくお願いいたします。

[kazuki__]

すみません。結合テストという名称が正しいのかよくわかりません。
クロスブラウザでのブラックボックステストというのが正しいかもしれません。

Answer 1

yamap_55 さん（質問への追記・修正の依頼欄のコメント）に同感です。
方法論(How)よりも根拠(Why)のほうが大事に思います。

テスト

単体テストしたものを組み合わせると新たなユニットになるので、
依存するライブラリの単体テストの内容が保証されるなら、以下をチェックすることで品質を担保できます。

1. 拡張した機能が正しく稼働するか
2. 1.に伴い発生せざるを得ないエラーがあるなら、正常にthrow されるか

（大事なのはコチラです。エラー発生は仕様ですが、そうではない不具合はバグです）

被依存ライブラリ（モジュール）がAPIを変えないなら、それらに依存する限りにおいて、
労力を抑えられるのがテスト駆動開発だと思います。

---

本題である方法論については 2010年ごろから数多くあるため、正直、回答しづらいですね。
「JavaScript ユニットテスト」のようなワードで検索して周囲が使っていそうなモダンなものを試してみるというのもあります（console をラップして自前でレポートを作るような猛者もいます）。

クロスブラウザ実装といえば、かつてのjQuery が抜きん出た存在でしたので、2009年の記事を見つけてきました
jQueryのためのテストツール QUnit でテスト駆動開発入門を写経する

Comments

[kazuki__]

回答ありがとうございます！
確かにテストにおいては、方法論よりも根拠が大事ですよね。改めて気づかせていただきありがとうございます。
根拠の方が大事というところに立ち返るとテストのためだけにサンプルアプリと結合してテストするというのはちょっと筋が悪いような気がしています。サンプルアプリ実装の分冗長ですしね。
ブラウザに依存する処理を実装しているので、理想としてはTestCafeみたいに単体テストを複数ブラウザ（リモートでも）で実行して動作確認できるといいのかなと思っています。
Jest with Pupeteerみたいな組み合わせでできるんですかね。

リンクありがとうございます。参考にさせていただきます！

[AkitoshiManabe]

ブラウザ依存が IE を含むのであればブラウザでの確認が確実かもしれませんね。
あまりに新しいテストフレームワークだと、どこまで、IEに対応しているかが怪しく思います。
Jest with Pupeteer も、Pupeteerの基盤となるブラウザが対象でIE部分は検査できるのか…。
「今なお、困らせてくれるIE」といった印象です。
Wikipediaの関連項目からユニットテスト・フレームワークのページに飛べます（２５種類紹介されていました）。リンクの案内しかできませんが色々と調査してみてください。

[kazuki__]

ありがとうございます！
しっかりライブラリの品質を担保できるテスト方法調査してみます！