ソフトウェアテストは、予想される出力と特定の入力セットの実際の出力の違いを検出するソフトウェアを評価するプロセスです。テスト、特にユニットテストは、すべての開発者の生活の重要な部分でなければなりません。殘念ながら、多くの開発者は活動を恐れているようです。 JavaScriptでは、多くのフレームワークからコードベースをテストすることができます。たとえば、Mocha、Selenium、およびQunit。この記事では、Qunitを紹介します。 Qunitは、JQueryチームによって開発および維持された単體テストフレームワークであり、JQueryやJQuery UIなどのプロジェクトにも背後にあります。
キーポイント
- QunitはjQueryチームによって開発および維持されており、使いやすさとセットアップのシンプルさのために人気のJavaScriptユニットテストフレームワークです。
- Qunitを開始するには、Qunit WebサイトからJavaScriptおよびCSSファイルの最新バージョンをダウンロードし、HTMLファイルに含めてください。
- Qunitは、同期コードの場合は
QUnit.test()、非同期コードの新しいテストを作成する2つの方法を提供します。これらのテストには、コードが期待どおりに機能することを確認するアサーションが含まれています。QUnit.asyncTest()Qunitは、 - 、
deepEqual()、equal()、notDeepEqual()、notEqual()、propEqual()、strictEqual()、notPropEqual()、notStrictEqual()、ok()、throws()、 などのさまざまなアサーション方法を提供します。 、 - 、
expect()、 、
Qunitでテストを作成する場合、ベストプラクティスは、メソッドを使用して実行されるアサーションの數(shù)を設定することです。これにより、すべてのアサーションが実行され、1つ以上のアサーションが実行されない場合、テストが失敗します。
設定qunit 多くの開発者がQunitを使用する主な理由の1つは、使いやすさです。このフレームワークを始めることは非常に簡単で、數(shù)時間でメインの概念をマスターできます。 Qunitを使用する最初のステップは、明らかにダウンロードすることから始めることです。これを行うには、いくつかの方法があります。ウェブサイトから手動でダウンロードしたり、CDNを使用したり、Bowerを使用したり、NPMを使用したりします。私のアドバイスは、シンプルなライブデモを開発していない限り、コードをテストするためにCDNに頼ってはいけないということです。したがって、他のオプションに固執(zhí)します。この記事では、前提條件（BowerとNPMを読む）を設定したくないので、最初のアプローチを取ります。したがって、QunitのWebサイトにアクセスして、JavaScriptファイル（Qunit-1.14.0.jsという名前）とCSSファイル（Qunit-1.14.0.cssという名前）の最新バージョンをダウンロードします。それらをindex.htmlも作成するフォルダーに入れます。このファイルでは、Webサイトのホームページに表示されるHTMLコードを配置します。便利なため、以下に繰り返します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <??> <??> </body> </html>
ご覧のとおり、このコードはCDNを使用してCSSとJavaScriptファイルを含めます。したがって、リンクを更新して、以前にダウンロードしたファイルを含める必要があります。マークには、いくつかの<div>が配置されているのがわかります。最初のものには、そのIDとしてQunitがあり、フレームワークで使用されているユーザーインターフェイスを表示し、テスト結(jié)果が表示されます。 IDがqunit-fixtureである2番目の<div>は、（開発者）が使用する必要があります。この要素により、開発者は、各テストの後にDOMのクリーンアップを心配することなく、DOMから要素を追加、編集、または削除するコードをテストできます。このコードによって作成された要素をこの<div>に配置すると、Qunitがリセットを処理します。最後に、テストを含むファイルを表すtests.jsファイルを含めます。私のアドバイスは、実際のプロジェクトを操作するときにファイルを使用してテストを保存することです。このチュートリアル用に作成したライブデモでは、JSBINを使用しましたが、ファイルのアップロードを許可しませんでした。したがって、デモでは、テストコードに巻き込まれたことがわかります。各セクションにタグを付けることの意味を理解したので、ブラウザのindex.htmlページを開いて、何が起こるかを確認します。すべてがうまくいけば、以下に示すようにライブデモインターフェイスが表示されます。これはJSBIN：QUNITの例としても提供されます。この段階では、當社に関連するこのインターフェイスの唯一の部分は、Qunitがテストの処理に費やす時間、定義されたアサーションの數(shù)、および合格して失敗したテストの數(shù)を示す部分です。上記のデモは、テストを定義していないことを示しています。この問題を解決しましょう。
qunit
を使用してテストを作成する方法 Qunitは、新しいテストを作成する2つの方法を提供します：QUnit.test()とQUnit.asyncTest()。最初のものはコードを同期してテストするために使用され、2番目のものは非同期コードをテストするために使用されます。このセクションでは、同期コードのテストを作成する方法について説明します。 QUnit.test()メソッドの署名は次のとおりです。
QUnit.test(name, testFunction)最初のパラメーター
は、作成されたテストを識別するのに役立つ文字列です。 2番目のパラメーターnameは、フレームワークが実行するアサーションを含む関數(shù)です。フレームワークは、すべてのQunitのアサーション方法を公開するこの関數(shù)にパラメーターを渡します。この説明をコードに変換すると、次のコードでtests.jsファイルを更新できます。
testFunction
QUnit.test('我的第一個測試', function(assert) {
// 斷言在這里...
});
qunitのアサーション方法アサーションはソフトウェアテストの中心にあります。彼らは、私たちのコードが期待どおりに機能することを確認することができます。 Qunitには、これらの期待を検証する多くの方法があります。テストでは、
メソッドに渡された関數(shù)のパラメーターによってアクセスできます（前の例では）。次のリストは、利用可能な方法とその機能と署名を要約しています。
deepEqual(value, expected[, message])：すべてのJavaScriptタイプで機能する再帰的な厳格な比較。valueとexpectedは、プロパティと値の點で同じであり、同じプロトタイプを持っている場合、equal(value, expected[, message])：valueは、非厳密な比較（==）検証を使用して提供されるパラメーターに等しくなります。expected- ：
notDeepEqual(value, expected[, message])と同じですが、不平等をテストしますdeepEqual()： - と同じですが、不平等をテストします
notEqual(value, expected[, message])equal()：オブジェクトのプロパティと値の厳密な比較。すべての屬性と値が同じ場合、アサーションが渡されます - ：厳密な比較（===）検証を使用して、
propEqual(value, expected[, message])に等しいパラメーターを提供します - ：
strictEqual(value, expected[, message])と同じですが、不平等をテストしますvalueexpected： と同じですが、不平等をテストします
notPropEqual(value, expected[, message])：最初のパラメーターが真の値である場合、アサーションが渡されますpropEqual()：コールバックが例外をスローし、オプションでスローされたエラーを比較するかどうかをテストします
-
notStrictEqual(value, expected[, message])これらの方法で受け入れられたパラメーターは次のとおりです。strictEqual() - ：検証する必要がある変數(shù)に保存されている値によって返される値
ok(value[, message])：テストする値。 - メソッドの場合、これは
throws(function[, expected][, message])です
- 利用可能な方法とパラメーターを理解したので、今度はコードをチェックする時が來ました。単一の関數(shù)の複數(shù)のテストを作成する代わりに、より現(xiàn)実的な例を再現(xiàn)しようとします。とにかく、私が示すテストは、完全なテストスイートと見なされるべきではありませんが、どこから始めればよいかという特定のアイデアを提供する必要があります。上記のテストを作成するには、テストするコードを定義する必要があります。この場合、私はこのような文字通りのオブジェクトを定義します：
value<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <??> <??> </body> </html>
ご覧のとおり、3つの関數(shù)を持つオブジェクトリテラルを定義します。最初のものは任意の數(shù)のパラメーターを受け入れ、最大値を返します。數(shù)字をパラメーターとして取得し、奇數(shù)の場合はテストします。
max()オブジェクトの配列を受け入れます。理想的には、Timestampという名前の屬性があるはずで、この屬性の値に従ってソートする必要があります。これらの関數(shù)の可能なテストセットは次のとおりです。（単語の制限が超えられているため、ここでは長いテストコードの例は省略されていますが、原則は前の説明と一致しています）isOdd()sortObj()isOdd()期待の設定sortObj()テストを作成するとき、ベストプラクティスは、実行すると予想されるアサーションの數(shù)を設定することです。そうすることで、1つ以上のアサーションが実行されない場合、テストは失敗します。 Qunitフレームワークは、この目的のためのAメソッドを提供します。この方法は、非同期コードを扱うときに特に役立ちますが、同期関數(shù)をテストするときに使用することをお勧めします。 メソッドの署名は次のとおりです。
ここで、
expect()パラメーターは、予想されるアサーションの數(shù)を指定します。 （単語の制限を超えているため、テストコードの更新の例もここでは省略されていますが、原則は前の説明と一致しています）expect()QUnit.test(name, testFunction)
qunitはじめに結(jié)論
メソッドを使用してそれらを設定する方法について言及しました。この投稿を楽しんだことを願っています。Qunitをプロジェクトに統(tǒng)合することを検討してください。 （単語の制限を超えているため、FAQの部分はここでは省略されています）assertionsNumberこのチュートリアルでは、テストの魔法の世界、特にQunitを使用してJavaScriptコードをユニットテストする方法を紹介します。 Qunitフレームワークをセットアップするのがどれほど簡単か、同期関數(shù)をテストするためにどのような方法が提供されるかを見てきました。さらに、コードをテストするためのフレームワークによって提供される一連のアサーション関數(shù)も學習しました。最後に、実行されると予想されるアサーションの數(shù)を設定することの重要性と、以上がQunitを始めましょうの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8640
17
1786
16
1729
56
1581
29
1448
31
Java vs. JavaScript：混亂を解消します
Jun 20, 2025 am 12:27 AM
JavaとJavaScriptは異なるプログラミング言語であり、それぞれ異なるアプリケーションシナリオに適しています。 Javaは大規(guī)模なエンタープライズおよびモバイルアプリケーション開発に使用されますが、JavaScriptは主にWebページ開発に使用されます。
JavaScriptコメント：短い説明
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsEareEssentialential-formaining、およびGuidingCodeexecution.1）single-linecommentseared forquickexplanations.2）多LinecommentsexplaincomplexlogiCorprovidededocumentation.3）clarifyspartsofcode.bestpractic
JSで日付と時間を操作する方法は？
Jul 01, 2025 am 01:27 AM
JavaScriptで日付と時間を処理する場合は、次の點に注意する必要があります。1。日付オブジェクトを作成するには多くの方法があります。 ISO形式の文字列を使用して、互換性を確保することをお勧めします。 2。時間情報を取得および設定して、メソッドを設定でき、月は0から始まることに注意してください。 3.手動でのフォーマット日付には文字列が必要であり、サードパーティライブラリも使用できます。 4.ルクソンなどのタイムゾーンをサポートするライブラリを使用することをお勧めします。これらの重要なポイントを習得すると、一般的な間違いを効果的に回避できます。
なぜの下部にタグを配置する必要があるのですか？
Jul 02, 2025 am 01:22 AM
PLACSTHETTHETTHE BOTTOMOFABLOGPOSTORWEBPAGESERVESPAGESPORCICALPURPOSESESFORSEO、userexperience、andDesign.1.IthelpswithiobyAllowingseNStoAccessKeysword-relevanttagwithtagwithtagwithtagwithemaincontent.2.iTimrovesexperiencebyepingepintepepinedeeping
JavaScript vs. Java：開発者向けの包括的な比較
Jun 20, 2025 am 12:21 AM
javascriptispreferredforwebdevelopment、whilejavaisbetterforlge-scalebackendsystemsandroidapps.1）javascriptexcelsininintingtivewebexperiences withitsdynAmicnature anddommanipulation.2）javaofferstruntypyping-dobject-reientedpeatures
DOMでのイベントの泡立ちとキャプチャとは何ですか？
Jul 02, 2025 am 01:19 AM
イベントキャプチャとバブルは、DOMのイベント伝播の2つの段階です。キャプチャは最上層からターゲット要素までであり、バブルはターゲット要素から上層までです。 1.イベントキャプチャは、AddEventListenerのUseCaptureパラメーターをTrueに設定することにより実裝されます。 2。イベントバブルはデフォルトの動作であり、UseCaptureはfalseに設定されているか、省略されます。 3。イベントの伝播を使用して、イベントの伝播を防ぐことができます。 4.イベントバブルは、動的なコンテンツ処理効率を改善するためにイベント委任をサポートします。 5.キャプチャを使用して、ロギングやエラー処理など、事前にイベントを傍受できます。これらの2つのフェーズを理解することは、タイミングとJavaScriptがユーザー操作にどのように反応するかを正確に制御するのに役立ちます。
JavaScript：効率的なコーディングのためのデータ型の調(diào)査
Jun 20, 2025 am 12:46 AM
javascripthassevenfundamentaldatypes：number、string、boolean、undefined、null、object、andsymbol.1）numberseadouble-precisionformat、有用であるため、有用性の高いものであるため、but-for-loating-pointarithmetic.2）ストリングリムムット、使用率が有用であること
JavaScriptアプリケーションのペイロードサイズをどのように削減できますか？
Jun 26, 2025 am 12:54 AM
JavaScriptアプリケーションがゆっくりとロードされ、パフォーマンスが低い場合、問題はペイロードが大きすぎることです。ソリューションには、次のものが含まれます。1。コード分割（コードスプリッティング）を使用し、React.lazy（）またはビルドツールを介して大きなバンドルを複數(shù)の小さなファイルに分割し、最初のダウンロードを減らすために必要に応じてロードします。 2。未使用のコード（Treeshaking）を削除し、ES6モジュールメカニズムを使用して「デッドコード」をクリアして、導入されたライブラリがこの機能をサポートしていることを確認します。 3.リソースファイルを圧縮してマージし、GZIP/BrotliとTerserがJSを圧縮できるようにし、ファイルを合理的にマージし、靜的リソースを最適化します。 4.頑丈な依存関係を交換し、day.jsやフェッチなどの軽量ライブラリを選択します
