本サイトからスピンオフした姉妹サイトです。書籍転載の8本目(書籍内の番号は「111」)。JavaScript用テストランナーの定番ライブラリである「QUnit」の基礎と基本的な使い方を説明。Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。『JavaScriptライブラリ実践活用[厳選111]』の詳細や購入は技術評論社のサイトや目次ページをご覧ください。本記事は、書籍の内容を改変することなく、そのまま転載したものです。Insiderのそれとは一致しません。QUnitはjQueryのテストにも用いられている、JavaScript用テストランナーの定番ライブラリです。テスト実行結果用のWebページを用意してテストコードを書き、ブラウザで表示することで自動的にテストが実行され、結果が表示されます。qunit-1.10.0.js、qunit-1.10.0.cssQUnitによるテスト実行結果QUnitとはQUnitはJavaScript用のテストランナーです。jQueryのテスト用に作成されたライブラリで、jQueryのコードにはQUnitを用いたテストコードが含まれています。いえ、現在はjQueryへの依存はありませんので、独立して使用することができます。テストを実行するには、テストコードとテスト実行用のWebページを作成します。作成したWebページをWebブラウザで表示するだけで、テストの実行と結果表示が行われます。具体的にどのようにすればよいのか、説明していきましょう。テスト対象コード今回はリスト111-01のような、作成中のFizzBuzzオブジェクトをテストします。テスト結果表示のため、あえて間違った実装にしています。テスト対象コード(fizzbuzz-test.js)テストコードQUnitのテストコードは、リスト111-02のように書きます。テストのグルーピングmoduleメソッドを使って、テストのグルーピングができます。グルーピングする範囲は次のmoduleメソッドが呼ばれるまでです。第1引数に指定した内容は、テスト結果を表示する際テストケースの先頭に付加されて表示されます(後述の「テスト実行結果」で掲載してる図111-01[5])。セットアップmoduleメソッドの第2引数に渡すオブジェクトにsetupメソッドを定義すると、それぞれのテストケース前に実行されるセットアップ処理を行うことができます。サンプルではFizzBuzzオブジェクトの作成をsetupメソッドに定義します。テストケース定義testメソッドを使うことで、1つのテストケースを定義します。第1引数にテストケースの内容を表す文言、第2引数に実際のテストを行う関数を指定します。検証テストケース内の検証処理は、主にokメソッドを使って行います。第1引数に指定した式が偽と評価されると、テスト失敗とみなされます。第2引数に行う検証の説明を指定すると、テスト結果にテストケース毎に説明が表示されます(後述の「テスト実行結果」で掲載してる図111-01[5])。「例外が発生すること」を検証するにはthrowsメソッドを使います。第1引数に検証対象の例外が発生する関数を指定し、第2引数に発生を検証したい例外の型を指定します。第3引数はokメソッドの第2引数と同じく、検証の説明を指定します。アサーションに使用するメソッドを表111-01にまとめます。アサーションメソッド一覧テスト結果ページテスト結果ページはリスト111-03のように書きます。ポイントとしては次のとおりです。QUnitテスト結果ページ用CSSをインポートテスト結果を整形して表示するためのCSSをインポートします。QUnitをインポートQUnit本体のjsファイルをインポートします。テスト対象コードをインポートQUnitの後にテスト対象コードのインポート定義を追加します。テストコードをインポート上述のテストコードのjsファイルを一番最後にインポートします。テスト結果表示領域テスト結果を表示する領域として、idが“qunit”のdivタグをページに追加します。■この1~5の記述の順番は必ず守るようにしてください。しないと正しくテストが行われません。テスト実行結果ブラウザでテスト結果ページを開くと、記載したテストコードが実行され、テスト結果が表示されます(図111-01)。タイトルリスト111-03の<title>タグで指定した、テスト結果ページのタイトルが表示されます。クリックすることで、すべてのテストを再実行することができます。ツールバーテスト実行を制御する項目が用意されています。表111-02にツールバーの機能を簡単にまとめます。ユーザエージェントテストを実行したブラウザのユーザエージェント情報が表示されます。テスト結果概要テスト結果の概要として、実行時間とテストケース数(成功、すべて、失敗)が表示されます。成功テストケース成功したテストケースは既定で閉じられた状態で表示され、リスト111-02にてmoduleメソッドで指定したテキストとtestメソッドで指定したテキスト、そしてテストケース内のアサーションメソッドの数(失敗、成功、すべて)が連結して表示されます。クリックすることで、実行したアサーションメソッドの結果が表示されます。「Rerun」リンクをクリックすると、テストを再実行できます。失敗テストケース表示内容は成功テストケースを同じですが、既定で開かれた状態で表示されます。失敗したテストケースは赤で表示され、アサーションメソッドの結果が表示されます。アサーションメソッドの結果も色分けされ、成功したアサーションは緑、失敗したアサーションは赤で表示されます。ブラウザによっては、アサーションが失敗した原因となる行番号などの付随情報が表示されるものもあります(図111-04)。※以下では、本稿の前後を合わせて5回分(第6回~第10回)のみ表示しています。INDEX]を参照してください。[Sammy.js]URLによって処理を分割する書籍転載の6本目(書籍内の番号は「77」)。URLの「#」以降の指定によって処理を分割することに着目したフレームワークである「Sammy.js」の基礎と基本的な使い方を紹介。[Knockout]MVVMパターンでアプリケーションを構築する書籍転載の7本目(書籍内の番号は「89」)。MVVM(Model-View-ViewModel)パターンをサポートするJavaScriptライブラリである「Knockout」の基礎と、基本的な使い方を解説。[QUnit]テストコードを実行し、ブラウザで結果を確認する書籍転載の8本目(書籍内の番号は「111」)。JavaScript用テストランナーの定番ライブラリである「QUnit」の基礎と基本的な使い方を説明。[Underscore.js]さなざまなコレクション操作を行う書籍転載の9本目(書籍内の番号は「100」)。ユーティリティ・ライブラリ「Underscore.js」の基礎として、さまざまなコレクション操作する方法を説明。[Underscore.js]テンプレートとオブジェクトから文字列を生成する書籍転載の10本目(書籍内の番号は「101」)。テンプレートとオブジェクトをバインドし、その結果を出力できる「Underscore.js」のテンプレートAPIの使い方を説明。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。2023最適なビューへの切り替えを推奨します:スマートフォン用表示に。