従来のjqueryコードをテストする方法

Question

私はTDDを既存のJavaScript/jQueryプロジェクトに導入し始めています。

現在、私はEmacsのCLIシェルでGruntの下でMochaとChaiをテストしています。

これは、同期、副作用のないコードの一部のためにうまく動作しますが、jQueryのを使用していない、など

私はより多くのセットアップに個別の問題に対処する多くのオンラインの記事を見つけました競合するライブラリや設定の雑草に乗ることなく、良いスタートガイドを見つけることはできませんでした。

私は「最高の」答えやあまりにも派手なものは必要ありません。私はモックボタンの押下やユーザ入力の必要はありません。ハンドラコードをテストするだけで幸せです。

だけのガイドを探したり、クライアント側のJavaScriptコードをテストするために推奨されるベストプラクティスのセット：既存のコードはjQueryとAJAXを使用しています

• を。
• テスト環境は継続的に稼働している必要があります。
• 私のgruntfileからテスト環境を起動する必要があります。または、冗談や他の同様のドライバに移動することもできます。
• 理想的には、テストをEmacsバッファーで実行したいのですが。しかし、必要ならば、私は画面の隅にこだわることができる別のウィンドウで実行してもよかったでしょう。
• テストは合理的に速く実行する必要があります。私はそれらがすべてのファイルを保存するたびに自動的に起動するようにします。

私は非常にバニラのテスト要件を記述していると思いますので、一般的な回答があると思います。しかし、私が探しているものが見つからないので、私のsearch-fuは今日は低くなければなりません。

Answer 1

あなたがMochaとChaiを使用している場合は、すでに基本設定があります。

テスト中のコードでドキュメントが変更された場合は、テスト用に人工ドキュメントを使用することができます（jsdom経由）。

テスト対象のコードがAjax呼び出しを呼び出してテストしたい場合は、sinonを使用して偽のXMLHttpRequestプロバイダを使用できます。 sinonはまた、setTimeoutとその家族のための便利なモックを提供します。

テスト対象のコードがjQueryを使用している場合、jQuery依存の部分を分離するか、jsdomドキュメントを使用してサーバー上でjQueryを実行するだけです。 jQueryはnpmで簡単にインストールできます。

---

これのすべては、あなたの目的のために十分に現実的ではないようだと、あなたはより多くの真の環境が欲しい、あなたがkarmaで見ることができた場合 - それは実行し、バックグラウンドでブラウザを開くことができる自動化ツールです内部のテストとコンソールのエラーを報告します。それはmochaよりもはるかに遅いですが、あなたは実際のブラウザ（おそらく複数のブラウザでさえ）で同時にコード（およびテスト）を実行することになります。

両方のツールには場所があります。バニラージスと簡単なDOMの変更（例：あなたがそれに関わっている場合はコンポーネントに反応してください）、実際のブラウザの動作にもっと依存するより現実的なテストを書くためにkarmaに頼ってください。