Qunitを始めましょう-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Qunitを始めましょう

Jennifer Aniston

Feb 21, 2025 pm 12:12 PM

Getting Started with QUnit

ソフトウェアテストは、予想される出力と特定の入力セットの実際の出力の違いを検出するソフトウェアを評価するプロセスです。テスト、特にユニットテストは、すべての開発者の生活の重要な部分でなければなりません。残念ながら、多くの開発者は活動を恐れているようです。 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()
、deepEqual()、equal()、notDeepEqual()、notEqual()、propEqual()、strictEqual()、notPropEqual()、notStrictEqual()、ok()、throws()、
、expect()、

。各方法には特定の目的があり、特定のパラメーターを受け入れます。

Qunitでテストを作成する場合、ベストプラクティスは、メソッドを使用して実行されるアサーションの数を設定することです。これにより、すべてのアサーションが実行され、1つ以上のアサーションが実行されない場合、テストが失敗します。

設定qunit 多くの開発者がQunitを使用する主な理由の1つは、使いやすさです。このフレームワークを始めることは非常に簡単で、数時間でメインの概念をマスターできます。 Qunitを使用する最初のステップは、明らかにダウンロードすることから始めることです。これを行うには、いくつかの方法があります。ウェブサイトから手動でダウンロードしたり、CDNを使用したり、Bowerを使用したり、NPMを使用したりします。私のアドバイスは、シンプルなライブデモを開発していない限り、コードをテストするためにCDNに頼ってはいけないということです。したがって、他のオプションに固執します。この記事では、前提条件（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があり、フレームワークで使用されているユーザーインターフェイスを表示し、テスト結果が表示されます。 IDがqunit-fixtureである2番目の<div>は、（開発者）が使用する必要があります。この要素により、開発者は、各テストの後にDOMのクリーンアップを心配することなく、DOMから要素を追加、編集、または削除するコードをテストできます。このコードによって作成された要素をこの<div>に配置すると、Qunitがリセットを処理します。最後に、テストを含むファイルを表すtests.jsファイルを含めます。私のアドバイスは、実際のプロジェクトを操作するときにファイルを使用してテストを保存することです。このチュートリアル用に作成したライブデモでは、JSBINを使用しましたが、ファイルのアップロードを許可しませんでした。したがって、デモでは、テストコードに巻き込まれたことがわかります。各セクションにタグを付けることの意味を理解したので、ブラウザのindex.htmlページを開いて、何が起こるかを確認します。すべてがうまくいけば、以下に示すようにライブデモインターフェイスが表示されます。これはJSBIN：QUNITの例としても提供されます。この段階では、当社に関連するこのインターフェイスの唯一の部分は、Qunitがテストの処理に費やす時間、定義されたアサーションの数、および合格して失敗したテストの数を示す部分です。上記のデモは、テストを定義していないことを示しています。この問題を解決しましょう。

qunit

を使用してテストを作成する方法

Qunitは、新しいテストを作成する2つの方法を提供します：QUnit.test()とQUnit.asyncTest()。最初のものはコードを同期してテストするために使用され、2番目のものは非同期コードをテストするために使用されます。このセクションでは、同期コードのテストを作成する方法について説明します。 QUnit.test()メソッドの署名は次のとおりです。

QUnit.test(name, testFunction)

ログイン後にコピー

最初のパラメーター

は、作成されたテストを識別するのに役立つ文字列です。 2番目のパラメーターnameは、フレームワークが実行するアサーションを含む関数です。フレームワークは、すべてのQunitのアサーション方法を公開するこの関数にパラメーターを渡します。この説明をコードに変換すると、次のコードでtests.jsファイルを更新できます。 testFunction

このコードは、文字列「私の最初のテスト」と空のボディを持つ関数によって識別された新しいテストを作成します。アサーションなしでテストを追加するのは役に立ちません。この問題を解決するには、Qunitで利用可能なアサーション方法を学ぶ必要があります。

QUnit.test('我的第一个测试', function(assert) {
   // 断言在这里...
});

ログイン後にコピー

qunitのアサーション方法

アサーションはソフトウェアテストの中心にあります。彼らは、私たちのコードが期待どおりに機能することを確認することができます。 Qunitには、これらの期待を検証する多くの方法があります。テストでは、

メソッドに渡された関数のパラメーターによってアクセスできます（前の例では

）。次のリストは、利用可能な方法とその機能と署名を要約しています。

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])と同じですが、不平等をテストします value expected：
notPropEqual(value, expected[, message])：最初のパラメーターが真の値である場合、アサーションが渡されます propEqual()
notStrictEqual(value, expected[, message])これらの方法で受け入れられたパラメーターは次のとおりです。 strictEqual()
：検証する必要がある変数に保存されている値によって返される値 ok(value[, message])
メソッドの場合、これはthrows(function[, expected][, message])です

：アサーションを説明するオプションの文字列

：実行する関数はエラーを返します

利用可能な方法とパラメーターを理解したので、今度はコードをチェックする時が来ました。単一の関数の複数のテストを作成する代わりに、より現実的な例を再現しようとします。とにかく、私が示すテストは、完全なテストスイートと見なされるべきではありませんが、どこから始めればよいかという特定のアイデアを提供する必要があります。上記のテストを作成するには、テストするコードを定義する必要があります。この場合、私はこのような文字通りのオブジェクトを定義します：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つの関数を持つオブジェクトリテラルを定義します。最初のものは任意の数のパラメーターを受け入れ、最大値を返します。
数字をパラメーターとして取得し、奇数の場合はテストします。 max()オブジェクトの配列を受け入れます。理想的には、Timestampという名前の属性があるはずで、この属性の値に従ってソートする必要があります。これらの関数の可能なテストセットは次のとおりです。（単語の制限が超えられているため、ここでは長いテストコードの例は省略されていますが、原則は前の説明と一致しています）isOdd() sortObj()isOdd()期待の設定sortObj()

テストを作成するとき、ベストプラクティスは、実行すると予想されるアサーションの数を設定することです。そうすることで、1つ以上のアサーションが実行されない場合、テストは失敗します。 Qunitフレームワークは、この目的のためのAメソッドを提供します。この方法は、非同期コードを扱うときに特に役立ちますが、同期関数をテストするときに使用することをお勧めします。メソッドの署名は次のとおりです。

ここで、expect()パラメーターは、予想されるアサーションの数を指定します。（単語の制限を超えているため、テストコードの更新の例もここでは省略されていますが、原則は前の説明と一致しています）expect()
```
QUnit.test(name, testFunction)
```
ログイン後にコピー
ログイン後にコピー
qunitはじめに結論
assertionsNumber このチュートリアルでは、テストの魔法の世界、特にQunitを使用してJavaScriptコードをユニットテストする方法を紹介します。 Qunitフレームワークをセットアップするのがどれほど簡単か、同期関数をテストするためにどのような方法が提供されるかを見てきました。さらに、コードをテストするためのフレームワークによって提供される一連のアサーション関数も学習しました。最後に、実行されると予想されるアサーションの数を設定することの重要性と、
メソッドを使用してそれらを設定する方法について言及しました。この投稿を楽しんだことを願っています。Qunitをプロジェクトに統合することを検討してください。（単語の制限を超えているため、FAQの部分はここでは省略されています）
以上がQunitを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7912

Java チュートリアル

1652

CakePHP チュートリアル

1411

Laravel チュートリアル

1303

PHP チュートリアル

1248

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。