フロントエンドテスト：テストの方法と方法、使用するツール

Question

私はRubyコードについてしばらくテストを書いてきましたが、フロントエンド開発者として、明らかにフロントエンドコード用に記述するコードにこれを組み込むことに興味があります。私が遊んでいたオプション：

CasperJS
カピバラ＆Rspec
ジャスミン
キュウリまたは単にRspec

テストに何を使用していますか？そしてそれ以上に、人々は何をテストしますか？ JavaScriptだけですか？リンク？フォーム？ハードコードされたコンテンツ？

どんな考えでも大歓迎です。

carlos · Accepted Answer

数か月前に同じ質問をしましたが、多くの開発者と話をして多くの研究をした後、これがわかりました。 JavaScriptを単体テストし、UI統合テストの小さなセットを作成し、記録および再生のテストツールを避ける必要があります。詳細に説明しましょう。

まず、テストピラミッドを検討します。これは、Mike Cohnが作成した興味深い類推であり、どの種類のテストを行うべきかを判断するのに役立ちます。ピラミッドの下部には、単体テストがあります。これは堅牢で、高速なフィードバックを提供します。これらはテスト戦略の基盤となり、ピラミッドの大部分を占める必要があります。上部には、UIテストがあります。これらは、たとえばSeleniumが行うように、UIと直接対話するテストです。これらのテストはバグを見つけるのに役立つかもしれませんが、より高価で非常に遅いフィードバックを提供します。また、使用するツールによっては非常に脆弱になり、実際の製品コードを書くよりもこれらのテストの保守に多くの時間を費やすことになります。中央のサービス層には、UIを必要としない統合テストが含まれています。たとえば、Railsでは、DOM要素と対話する代わりに、RESTインターフェイスを直接テストします。

さて、質問に戻りましょう。私は、JSに十分な単体テストを書くだけで、Spring Roo（Java）で大量のJavaScriptを使用して作成されたWebアプリケーションであるプロジェクトのバグの数を大幅に削減できることがわかりました。私のアプリケーションには、JSで記述された多くのロジックがあり、それがここでテストしているようなものです。ページが実際にどのように表示されるか、またはアニメーションが本来どおりに再生されるかどうかは気にしません。要素クラスが正しく割り当てられ、エラー条件が適切に処理されている場合、JSで記述したモジュールが期待されるロジックを実行するかどうかをテストします。これらのテストでは、Jasmineを使用しています。これは素晴らしいツールです。習得が非常に簡単で、スパイと呼ばれるニースのモック機能があります。 Jasmine-jQuery は、jQueryを使用している場合により優れた機能を追加します。特に、HTMLコードのスニペットであるフィクスチャを指定できるため、DOMを手動でモックする必要はありません。このツールをMavenに統合しました。これらのテストはCI戦略の一部です。

特にSeleniumなどの記録/再生ツールに依存している場合は、UIテストに注意する必要があります。 UIは頻繁に変更されるため、これらのテストは壊れ続けるため、テストが本当に失敗したのか、単に古くなっているのかを見つけるのに多くの時間を費やすことになります。また、単体テストほどの価値はありません。実行するには統合環境が必要なので、ほとんどの場合、開発コストが高い開発を終えた後にのみ実行するのが好きです。

ただし、煙/回帰テストの場合、UIテストは非常に便利です。これらを自動化する必要がある場合は、いくつかの危険に注意する必要があります。 テストを作成し、記録しないでください。記録されたテストは通常、コードで行う小さな変更ごとに破損する自動生成されたxpathに依存しています。 Cucumberはこれらのテストを作成するための優れたフレームワークであり、WebDriverとともに使用してブラウザーの対話を自動化できると考えています。 テストについて考えるコード。 UIテストでは、要素を見つけやすくする必要があるため、複雑なxpathに依存する必要はありません。通常はクラスとid要素を追加することは頻繁ではありません。 小さなコーナーケースごとにテストを書くな。これらのテストは書くのに費用がかかり、実行に時間がかかりすぎる。ほとんどの機能を検討するケースに焦点を当てる必要があります。このレベルで作成するテストが多すぎる場合、ユニットテストで以前にテストした機能と同じ機能をテストする可能性があります（作成している場合）。

現在のプロジェクトでは、SpockとGebを使用してUIテストを記述しています。これらのツールは素晴らしいと思います。これらはGroovyで記述されており、私のJavaプロジェクトに適しています。

buxter · Answer

そのためのオプションとツールがたくさんあります。しかし、それらの選択は、Web UIを持っているか、デスクトップアプリであるかによって異なりますか？

あなたが言及したツールからそれがWeb UIであると仮定します。 Selenium（別名WebDriver）をお勧めします： http://seleniumhq.org/docs/

サポートしている言語はさまざまです（Rubyがリストにあります）。さまざまなブラウザに対して実行でき、多くのチュートリアルとヒントが用意されているため、非常に使いやすいです。ああ、もちろん無料です:)

DJ Forth · Answer

しかし、この投稿には多くのいいね！がありますので、今はたくさんのテストを書いているので、質問への回答を投稿します。

したがって、FEテストに関しては、 karma と Jasmine を使用して多くの時間を費やしましたが、karmaはmochaやqunitのような他のテストスイートでもうまく動作します。これらは素晴らしく、karmaを使用すると、ブラウザーと直接接続してテストを実行できます。欠点は、テストスイートが大きくなると、かなり遅くなる可能性があることです。

そこで最近、私は Jest に移動しました。これははるかに高速であり、あなたの反応アプリがスナップショットテストで enzyme を使用すると、本当に良いカバレッジが得られます。カバレッジの話Jestにはイスタンブールのカバレッジが組み込まれ、セットアップされており、モックは本当に簡単に使用できます。マイナス面はブラウザでテストせず、 jsdom と呼ばれるものを使用しますが、これは高速ですが、いくつかの迷惑があります。個人的には、特にwebpack/babelを介してコードをコンパイルする場合、これは大したことではないと思います。つまり、クロスブラウザのバグはかなり少ないため、手動でテストする場合は一般に問題ではありません）。

Railsスタック内での作業に関しては、webpacker gemが利用可能になり、npmとnodeを使用することは一般的にはるかに除外されているため、これは非常に簡単です。 nvm ノードのバージョンを管理する

これは厳密なテストではありませんが、リンティングを使用することをお勧めします。これはコード内の多くの問題も検出するためです。 JSの場合、 eslint と prettier を使用し、scss/cssを使用します stylelint

テスト対象については、Carlosがテストピラミッドについて語っているように、すべての理論は変わらず、ツールだけが関係していると思います。また、テストについて実用的であると付け加え、常にテストしますが、どのレベルとカバレッジにプロジェクトに依存するかを追加します。時間を管理し、短いライフサイクルプロジェクトのテストに数時間/数日を費やすことが重要です。大規模/長期プロジェクトでは、大規模なテストスイートのメリットが明らかに大きくなります。

とにかく、それが質問を見る人々を助けることを願っています。