Qunitで非同期コードをテストする方法

キーポイント

同期関数のように、
• 非同期関数にはテストが必要です。 Qunitは、特に非同期コードをテストするためのメソッドを提供します。 QUnit.asyncTest()
• 他の2つの方法と組み合わせて使用​​する必要があります。 QUnit.asyncTest()は、テストを停止した後、実行の実行を開始または再開するために使用されますが、QUnit.start()は、テストランナーが継続する前に待機する必要があるQUnit.stop()呼び出しの数を増やします。 QUnit.start() QUnit.stop()このチュートリアルは、これらの方法を実際に使用する方法の例を示しています。これは、パラメーターのセットの最大値を非同期的に計算する関数をテストするためにQUnit.start()、
、
• を使用する方法を示しています。 QUnit.start() QUnit.stop()このチュートリアルでは、Ajax操作の非同期コードをテストするとき、サーバーに潜在的なエラーがある可能性があるため、サーバーが返した実際のデータまたは結果に依存しないことを推奨しています。代わりに、jquery mockjaxやsinon.jsなどのライブラリを使用してAjaxリクエストをシミュレートすることをお勧めします。 QUnit.asyncTest()
• 数週間前、私はQunitを手に入れるというタイトルの記事を公開し、単体テストの主な概念とQunitを使用してJavaScriptコードをテストする方法について議論しました。その投稿では、フレームワークによって提供される主張と、コードを同期してテストする方法に焦点を当てました。ただし、実際のケースについて議論したい場合は、非同期機能について話すことを避けることはできません。同期関数と同様に、非同期関数には注意が必要で、さらに多くのテストが必要です。この投稿では、Qunitを使用して非同期コードをテストする方法を教えます。利用可能なアサーション方法を覚えていない場合、または私の記事を完全に見逃した場合は、Qunitを始めましょう。この記事で説明されている資料は、この記事の前提条件です。

Qunitを使用して非同期テストを作成します

JavaScriptに記載されているすべての非自明なプロジェクトには、非同期関数が含まれています。特定の時間後に特定の操作を実行し、サーバーからデータを取得し、サーバーにデータを送信するために使用されます。 Qunitは、非同期コードをテストすることを目的とすると呼ばれるメソッドを提供します。この方法の署名は次のとおりです

パラメーターはQUnit.asyncTest()と同じ意味を持っていますが、便利なため、ここで報告します。

• name：作成されたテストを識別するのに役立つ文字列。
• testFunction：フレームワークが実行されるというアサーションを含む関数。フレームワークは、すべてのQunitのアサーション方法を公開するこの関数にパラメーターを渡します。

この方法が

と同じパラメーターを受け入れるという事実は、誤解を招く可能性があります。原則は同じであると思うかもしれません。非同期関数をテストするためにしなければならないことは、QUnit.test()に呼び出しをQUnit.asyncTest()に置き換えることです。そんなに速くない！その作業を達成するには、QUnit.test()を他の2つの方法と組み合わせて使用​​する必要があります。それらについてもっと学びましょう。 QUnit.asyncTest() QUnit.start()QUnit.stop()および

QUnit.start() QunitがQUnit.stop()を使用して作成されたテストを実行すると、テスト実行プログラムを自動的に停止します。次に、アサーション

を含む関数呼び出しを待ちます。

の目的は、テストが停止した後に実行の実行を開始または再開することです。このメソッドは、整数をその唯一のオプションパラメーターQUnit.asyncTest()として受け入れ、複数のQUnit.start()呼び出しを1つのQUnit.start()にマージします。テストは、メソッドを使用して停止できます。 QUnit.start()テストランナーが継続する前に待つ必要がある呼び出しの数を増やします。このメソッドは、フレームワークが待つ必要があるQUnit.stop()の追加呼び出しの数を指定する唯一のオプションパラメーターとして整数を受け入れます。そのデフォルト値は1です。理解するのは少し難しいですね。対応するメソッドを含むメソッド定義は、混乱のように聞こえます。残念ながら、それはまさに彼らがしていることです。これらの概念を明確にするために私が知っている最善の方法は、特定の使用例を提供することです。 QUnit.start()すべてのコンテンツを統合QUnit.start()

このセクションでは、これまでに議論されたアプローチを実践します。うまくいけば、あなたがそれを読んだら、あなたはこのメカニズムをより深く理解するでしょう。 Qunit：

を開始する記事で開発された関数の1つを使用した簡単な例から始めましょう。この関数は、任意の数のパラメーターを使用し、最大値を返します。この関数のコードは次のとおりです さて、この関数は通常、非常に大きなパラメーターセットで実行されるとしましょう。結果が計算されるまで、ユーザーのブラウザがブロックされないようにしたいと考えています。これを行うには、

に遅延値が0の

コールを配置します。非同期テスト関数に使用されるコード（max()の使用を感じるようにする必要があります）は次のとおりです。

<code class="language-javascript">QUnit.asyncTest(name, testFunction)</code>

上記のコードでは、

のコールバックとしてmax()関数への呼び出しをラップしました。アサーションをwindow.setTimeout()で実行した後、テストランナーが実行を再開できるようにmax()メソッドを呼び出します。このメソッドの呼び出しを避けた場合、テストランナーは立ち往生し、テストは惨めに失敗します（実際にテストは一時停止され、他に何もしません。前の例は、同期の対応物と非常によく似ているため、理解しやすいはずです。ただし、1つの状況だけでテストしても、コードを私たちに納得させません。さらに、QUnit.start()の実際の適用を見る機会はありませんでした。この問題を解決するために、前の投稿で見たすべてのアサーションをQUnit.stop()に渡された関数に実装します。完全なコードは次のようになります：QUnit.asyncTest()

<code class="language-javascript">function max() {
   var max = -Infinity;
   for (var i = 0; i < arguments.length; i++) {
      if (arguments[i] > max) {
         max = arguments[i];
      }
   }

   return max;
}</code>

テストでは、Qunitを始める際に議論したように、実行されると予想されるアサーションの数を設定します。次に、この関数は

メソッドを呼び出します。これは、テストで4つの非同期呼び出しを実行したために必要です。 QUnit.stop()を使用すると、フレームワークは呼び出しのみを待ちますQUnit.asyncTest()。呼び出しを省略し、さらに3つの呼び出しを指定すると、QUnit.start()にさらに3つの呼び出しが行われると、予想されるアサーションの数が実行されたアサーションの数とは異なるため、テストが失敗します。 QUnit.stop()への呼び出しを含むコードのライブデモを以下に示し、JSBINとして提供します。 QUnit.start() expect()

qunit

を使用した非同期テスト このセクションでは、AJAX操作を実行しない非同期コードの例を見てきました。ただし、通常、サーバーからデータをロードするか、データを送信する必要があります。これが発生した場合、サーバーが返した実際のデータや結果に頼らない方が良い場合があります。この問題を回避するには、Ajaxリクエストをシミュレートする必要があります。これを行うには、Jquery Mockjax、Sinon.js、またはニーズに合ったその他のライブラリを使用できます。

結論

このチュートリアルでは、非同期関数のテストを作成する方法を学びました。まず、メソッドを使用して非同期コードを含むテストを宣言する方法について説明します。次に、他の2つのメソッドと

の存在を理解します。これは、

を使用してテストを作成するときに使用する必要があります。最後に、2つのテストを開発して、これらのメソッドがどのように連携するかを示すことにより、獲得した知識を実践します。このチュートリアルで説明されているトピックを使用して、JavaScriptで記述できるコードをテストするために必要なすべての機能があります。あなたがこのフレームワークについてどう思うか、そしてあなたがあなたのプロジェクトでそれを使用することを検討するかどうかを知りたいです。 QUnit.asyncTest() QUnit.start()QUnit.stop()Qunit QUnit.asyncTest()

を使用した非同期コードのテストに関するFAQ（FAQ）

非同期コードとは何ですか？それをテストすることが重要なのはなぜですか？

Asyncコードとは、重複する期間に開始、実行、完了できる操作を指します。これは、複数のことが同時に起こることを可能にするプログラミングの方法です。これは、多くのI/O操作を必要とするアプリケーションや、サーバーからデータを取得するなどのタスクを必要とするアプリケーションで特に役立ちます。非同期コードのテストは、コードのすべての部分が同時に実行されている場合でも、正しく実行されることを保証するのに役立つため重要です。これは、異なるコードパーツの重複した実行によって引き起こされる可能性のある潜在的な問題を特定するのに役立ちます。

Qunitは非同期コードのテストにどのように役立ちますか？

Qunitは、強力で使いやすいJavaScriptユニットテストフレームワークです。非同期コードを含む一般的なJavaScriptコードをテストできます。 Qunitは、非同期コードのテストを簡単にする「非同期」ユーティリティ関数を提供します。この関数は、非同期コードが実行された後にテスト実行プログラムを一時停止し、復元します。これにより、テストが非同期コードの動作を正確に反映します。

Qunitで「非同期」関数を使用して非同期コードをテストする方法は？

テスト関数で呼び出すことにより、Qunitで「非同期」関数を使用します。これにより、コールバック関数が返されます。これは、非同期操作が完了した後に呼び出す必要があります。基本的な例は次のとおりです

この例では、「完了」コールバックが呼び出されるまでテスト実行プログラムを一時停止するために「非同期」関数を使用します。

<code class="language-javascript">QUnit.asyncTest(name, testFunction)</code>

...（残りのFAQの質問と回答は、元のテキストに従ってコンテンツの一貫性を保つために同様に書き直すことができますが、文の構造と単語の使用は完全にコピーを避けるために変更されました。

以上がQunitで非同期コードをテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。