👩🏼‍🔬 🧒🏿 👨🏽 [ブックマーク] JavaScriptプロジェクトをテストするためのツール 🚥 💝 👨‍👩‍👧‍👦

本書の翻訳者であり、今日翻訳を行っているWelldone Softwareの従業員は、JavaScriptプロジェクトのテストツールについて簡単に説明する場合、単体テストと統合テストにはJestを、ユーザーインターフェイステストにはTestCafeを使用することをお勧めします。ただし、特定のプロジェクトごとに特別なものが必要になる場合があります。必要なものを正確に見つける最良の方法は、機能していると思われるいくつかのツールを使用して、それらを実際にテストすることです。実験により、正確に何をやめるかがわかります。

2018年に注目する価値のあるJSプロジェクトで最も広く使用されているテストツールの概要をご紹介します。

汎用テストツール

▍Jsdom

Jsdomは、WHATWG DOMおよびHTML標準のJavaScript実装です。言い換えれば、jsdomは通常のJS以外のことを行わずにブラウザー環境を模倣します。

このような環境では、テストを非常に迅速に実行できます。 jsdomの欠点は、すべてが実際のブラウザーの外部でシミュレートできるわけではない（たとえば、このアプローチではスクリーンショットを撮ることができない）ため、このツールを使用するとテストの可能性が制限されます。

JSコミュニティがjsdomに集中的に取り組んでおり、このツールを改善していることに言及する価値があります。現在のバージョンの機能は、実際のブラウザに非常に近いものです。

▍イスタンブール

イスタンブールのツールを使用すると、単体テストでコードカバレッジを分析できます。彼は詳細なレポートを表示します。このレポートに焦点を当てると、プロジェクトでまだテストされていないものを正確に把握し、状況を改善するために必要な作業量を評価できます。

▍カルマ

Karmaを使用すると、ブラウザーおよびjsdomを含むブラウザーに似た環境でテストを実行できます。

Karmaは、テストが実行される環境で特別なWebページを持つテストサーバーをサポートします。このページは多くのブラウザで開くことができます。さらに、これはBrowserStackなどのサービスを使用してテストをリモートで実行できることを意味します。

▍チャイ

チャイは、最も人気のあるクレーム作成ライブラリです。

▍予期しない

Unexpectedは、構文がChaiとわずかに異なるアサーションライブラリです。さらに、このライブラリは拡張可能であるため、より高度なステートメントを作成できます。特に、 unexpected-reactなどの予期しないことに基づいてライブラリを使用することについて話しています。詳細については、こちらを参照してください。

▍Sinon.JS

Sinon.JSは、いわゆるスパイ、スタブ、およびモックアップを使用してJavaScriptプロジェクトをテストする機能を提供する強力なスタンドアロンシステムです。このシステムは、単体テストのフレームワークと連携できます。

▍Testdouble.js

Testdouble.jsは、Sinonと同じ機能を実行するあまり人気のないライブラリですが、開発者は、Sinonよりも同様の問題をよりよく解決すると述べています。これは、一連の機能、いくつかのアーキテクチャ機能、およびテストへのアプローチによって区別され、多くの状況で役立つことができます。 testdoubleの詳細については、こちら、こちら、こちらをご覧ください。

▍ワラビー

Wallabyも注目すべきツールです。それは無料ではありませんが、多くのユーザーは、彼らがそれを求めるお金の価値があると信じています。 WallabyはIDEで実行され（すべての主要なIDEがサポートされています）、コードの変更と一致するテストを実行します。テスト結果のデータは、コードと同じ場所にリアルタイムで表示されます。

ワラビー

▍キュウリ

Cucumberは、開発者がBDDでテストを作成するのに役立ちます。テストは、Gherkin構文を使用して準備された受け入れ基準ファイルと、それに対応する実際のテストファイルに分けられます。テストは、JSを含むフレームワークがサポートするさまざまな言語で作成できます。

like-article.feature

例を次に示しlike-article.feature

。

 Feature: A reader can share an article to social networks As a reader I want to share articles So that I can notify my friends about an article I liked Scenario: An article was opened   Given I'm inside an article   When I share the article   Then the article should change to a "shared" state

like-article.steps.js

例を次に示しlike-article.steps.js

。

 module.exports = function() { this.Given(/^I'm inside an article$/, function(callback) {   //     }) this.When(/^I share the article$/, function(callback) {   //     })   this.Then(/^the article should change to a "shared" state$/, function(callback) {       //     }) }

多くのチームは、この構文がTDDよりも便利だと感じています。

ユニットおよび統合テストフレームワーク

適切なテストツールを検索するときにおそらく最初に選択する必要があるのは、それをサポートするフレームワークとライブラリです。独自のツールが必要になるまで、選択したフレームワークが提供するものを使用することをお勧めします。一般的なガイドラインを次に示します。

ある種の出発点を探している場合、または大規模なプロジェクトに迅速なフレームワークが必要な場合は、Jestを選択してください。
構成の柔軟性と拡張性に関心がある場合は、Mochaをご覧ください。
シンプルにしたい場合は、Avaを試してください。
低レベルのテストメカニズムを制御する必要がある場合は、テープに注意してください。

このカテゴリで最も有名なツールの概要を以下に示します。

▍モカ

Mochaは現在、最も広く使用されているライブラリです。後で説明するJasmineライブラリとは異なり、このライブラリは、サードパーティのアサーションツールと外部ツールを使用して、シミュレーションとスパイ機能（通常はEnzymeとChai）を作成します。これは、Mochaをセットアップする際のいくつかの追加の困難性と、結果の機能が異なるライブラリ間で共有されるという事実を意味しますが、このフレームワークはJasmineと比較してより柔軟で拡張可能です。

たとえば、特別なステートメントロジックが必要な場合は、Chaiをフォークして、ツールボックス内のChaiのみを独自のステートメントライブラリに置き換えることができます。これはジャスミンで行うことができますが、モカではこの変化はより明白になります。

以下は、気を付けるべきMochaの機能の一部です。

コミュニティ。コミュニティは、独自のテストシナリオで使用するための多くのプラグインと拡張機能を開発しました。
拡張性。 Sinonなど、Mochaで使用できるプラグイン、拡張機能、およびライブラリには、Jasmineにはない機能が含まれています。
グローバル変数。 Mochaは、デフォルトでは、グローバルビューでテスト構造を作成します。これは、モカとジャスミンを区別するステートメント、模倣、スパイ機能には適用されません。グローバルオブジェクトのこのような不均一性は、一部の人にとっては非論理的なようです。

▍Jest

Jestは、Facebookが開発したテストフレームワークです。それはジャスミンに基づいています。今日、Facebookは機能のほとんどを再設計し、それに基づいて多くの新機能を作成しました。

Jestに関する膨大な資料を分析した後、多くの開発者がこのフレームワークの速度と利便性に感銘を受けていると結論付けることができます。 Jestの機能には次のものがあります。

パフォーマンス。まず、Jestフレームワークは、インテリジェントな並列テストメカニズムの実装により、多くのテストファイルを持つ大規模プロジェクトへのアプリケーションで最速として認識されていることに言及する価値があります。さらに、ここ、ここ、ここ、ここ、ここでの結論を裏付ける資料で、私たち自身の経験でこれを確認できます。
ユーザーインターフェース Jestインターフェースは明確で便利です。
仕事を始めるのに必要なすべての存在。 Jestには、アサーション、スパイウェア、およびシミュレーションツールが付属しており、これらは同じことを行うSinonのような個別のライブラリと同等です。標準機能が適切ではなく、特別なものが必要な場合は、サードパーティのライブラリを使用できます。

グローバル変数。 Jasmineと同様に、Jestはデフォルトでグローバルテスト変数を作成するため、明示的に接続する必要はありません。同様のアプローチはテストの柔軟性とテストの管理能力を損なうため、この機能は欠点として認識されますが、ほとんどの場合、作業を単純化します。

 // "describe"      //      : // import { describe } from 'jest' // import { describe } from 'jasmine' describe('calculator', function() { ... })

スナップショットを使用したテスト。 Facebookによって開発されたjest-snapshotライブラリがあります。スナップショットテストを使用してテストを整理するために、たとえば適切なプラグインを介して、他のほとんどのフレームワークで使用できます。
モジュールの改善されたシミュレーション。 Jestは「重い」モジュールのシミュレーションを簡素化し、テストの速度を向上させます。たとえば、Jestツールを使用して、ネットワーク要求を実行する特定のサービスの「スタブ」を作成できます。これにより、要求の実際の実行に比べてはるかに高速になります。
テストによるコードカバレッジの分析。 Jestには、イスタンブールに基づくテストでコードカバレッジを分析するための強力で高速な組み込みツールがあります。
信頼性 Jestは比較的新しいライブラリですが、2017年にはその安定性について多くの作業が行われ、現在では信頼できると見なされるようになりました。現在、たとえば、すべての主要なIDEがサポートしています。
開発。プロジェクトの開発中、システムはファイルの変更を監視し、不必要なアクションを実行しないため、テストは非常に迅速に実行されます。

▍ジャスミン

Jasmineは、Jestのベースとなっているテストフレームワークです。ジェストがある場合-誰がジャスミンを必要とする可能性がありますか？問題は、JasmineがJestよりも早く登場したこと、膨大な数の出版物があり、多くのツールが作成されていることです。

さらに、Angularの作成者はJestではなくJasmineを使用することを推奨していますが、JestはAngularプロジェクトのテストに最適であり、多くの人がこれを使用しています。 Jasmineの主な機能は次のとおりです。

仕事を始めるのに必要なすべての存在。 Jasmineには、テストを開始するために必要なものがすべて含まれています。
グローバル変数。ジャスミンでは、すべての重要なテストツールがグローバルな範囲で利用可能です。
コミュニティ。ジャスミンは2009年から存在しており、その間にこのフレームワークに関する多くの出版物が公開されています。さらに、多くのJasmineベースのツールが作成されています。
角度サポート。 AngularのすべてのバージョンはJasmineをサポートし、Angularの公式ドキュメントを推奨するのはこのフレームワークです。

vaAva

Avaは、並列テスト実行をサポートする最小限のテストライブラリです。主な特徴は次のとおりです。

仕事を始めるのに必要なすべての存在。 Avaには、テストを開始するために必要なすべてが付属しています（Avaに簡単に統合できるスパイ機能とシミュレーションを作成するためのツールに加えて）。 AvaテストはNode.jsで実行できます。ここでは、次の構文を使用して、テストおよびビルドステートメントの構造を形成します。

 import test from 'ava' test('arrays are equal', t => { t.deepEqual([1, 2], [1, 2]) })

グローバル変数。上記のコードフラグメントからわかるように、ライブラリはグローバル変数を作成しません。つまり、開発者は何が起こっているかをより適切に制御できます。
シンプル。 Avaの構造とステートメントモデルは単純です。過度に複雑なAPIはありませんが、多くの高度な機能をサポートしています。
開発。システムは変更されたコードをすばやくテストできるため、Avaは開発プロセスでの使用に便利です...
スピード。テストは、別々のNode.jsプロセスとして並行して実行されます。
スナップショットを使用したテスト。この機能は、フレームワークの一部としてサポートされています。

▍テープ

テープは、ここで説明したテストフレームワークの中で最も単純で、小さく理解しやすいAPIを備えています。これはNode.jsで機能する通常のJSファイルです。テープの主な機能は次のとおりです。

シンプル。テストとアサーションの最小限の構造、複雑なAPIの欠如。ここではすべてがAvaよりも簡単です。
グローバル変数。グローバル変数は作成されません。これにより、テストをより適切に制御できます。
一般的な状態の欠如。テープはbeforeEach

ような関数の使用を歓迎しません。これは、単体テストとテストプロセスを最大限に制御したいという要望を反映しています。
コマンドラインインターフェイスは必要ありません。テープライブラリは、JSを実行できる場所であればどこでも機能します。

ユーザーインターフェイステストツール

まず、こことここでは、クロスプラットフォームおよびクロスブラウザテストの実行に使用できる機能を持つサービスプロバイダーに関する優れた資料を見つけることができます。

ユーザーインターフェイスをテストするための既存のツールは互いに非常に異なるため、インターフェイスのテスト対象を選択する前に、実験することをお勧めします。一言で言えば、ユーザーインターフェイスをテストするための環境を選択する人向けの一般的な推奨事項を表すために、次のように言えます。

シンプルで信頼性の高いユニバーサルツールを探している場合、または適切なフレームワークを見つけるための出発点を探している場合は、TestCafeを試してください。
時代に追いつき、開発者コミュニティのサポートを楽しみたい場合は、WebdriverIOをご覧ください。
ブラウザー間のサポートに関心がない場合は、Puppeteerを使用します。
アプリケーションに、ユーザーインタラクションの複雑なシナリオや、ページ、フルフォーム、ナビゲーション要素などの複雑なインターフェイスがない場合は、Casperのようなユーザーインターフェイスなしでクロスブラウザツールを使用します。

▍セレン

Seleniumを使用すると、ブラウザとの対話を自動化して、ユーザーアクションをシミュレートできます。このフレームワークはテスト専用に設計されたものではなく、さまざまな目的でブラウザを制御し、ソフトウェアメカニズムを使用してブラウザでのユーザーの動作をシミュレートするサーバーを提供できます。

Seleniumの機能は、多くのプログラミング言語を使用してさまざまな方法で制御できます。一部のツールを使用すると、プログラミングなしでSeleniumを操作できます。

ただし、SeleniumサーバーがSelenium WebDriverを使用して管理される構成に関心があります。これは、Node.jsとブラウザーを制御するサーバー間の対話のレイヤーとして機能します。システムのさまざまな部分の相互作用スキームは、次のように説明できます。

 Node.js <=> WebDriver <=> Selenium Server <=> FF/Chrome/IE/Safari

WebDriverは、テストのために選択したフレームワークにインポートできます。テストは、ブラウザー管理機能を使用して作成できます。

 describe('login form', () => { before(() => {   return driver.navigate().to('http://path.to.test.app/') }) it('autocompletes the name field', () => {   driver     .findElement(By.css('.autocomplete'))     .sendKeys('John')     driver.wait(until.elementLocated(By.css('.suggestion')))     driver.findElement(By.css('.suggestion')).click()     return driver     .findElement(By.css('.autocomplete'))     .getAttribute('value')     .then(inputValue => {       expect(inputValue).to.equal('John Doe')     }) }) after(() => {   return driver.quit() }) })

ところで、WebDriver自体でテストを実行することができます。オリジナルの形式でWebDriverを使用することを勧める著者の推奨事項があります。

ただし、WebDriverの機能を拡張するライブラリが存在するという事実を無視することはできません。WebDriverのフォークまたはラッパーによって提供されます。

ラッパーライブラリの欠点は、システムを複雑にすることです。フォークの外観は悪いです。なぜなら、フォークに費やされた努力は、WebDriver自体の開発に投資された可能性が高いからです。

ただし、Seleniumについて言えば、多くの人はSeleniumを直接使用しないことを好みます。 Seleniumの機能を使用しているライブラリをご覧ください。

アピウム

Appiumは、Selenium APIに似たAPIを提供します。このフレームワークは、次のツールを使用してモバイルプロジェクトのテストを整理するように設計されています。

iOS 9.3以降。 AppleのXCUITest 。
iOS 9.3より前。 AppleのUIAutomation 。
Android 4.2以降。 GoogleのUiAutomator / UiAutomator2 。
Android 2.3以降。 Googleからの計測。（計装サポートはSelendroidを介して実装されます）。
Windows Phone MicrosoftのWinAppDriver 。

したがって、Seleniumベースのツールを使用する場合、Appiumを使用してモバイルプロジェクトをテストできます。

分度器

分度器は、Angularに焦点を当てたSeleniumのラッパーライブラリです。このライブラリの主な機能は次のとおりです。

角度サポート。分度器はAngularに焦点を当てていますが、このライブラリは他のJSフレームワークで正常に使用できます。公式のAngular ドキュメントはこの特定のライブラリを推奨しています。
バグレポート。レポートを作成するための便利なメカニズムがあります。
コミュニティとテクノロジー。 TypeScriptサポートは分度器で利用可能です。このライブラリは、巨大なAngularチームによって開発されました。

WebdriverIO

WebdriverIOは、Selenium WebDriver機能を使用する独自のアプローチを提供します。このライブラリはNode.js用です。このプロジェクトの機能には次のものがあります。

構文 WebDriverIOには、非常にシンプルで読みやすい構文構造があります。
柔軟性。 WebDriverIOは、柔軟で拡張可能なライブラリです。
コミュニティ。このライブラリは、WebDriverIOの範囲を拡大するためのプラグインと拡張機能を作成した開発者の優れたサポートと熱狂的なコミュニティを持っています。

ナイトウォッチ

Nightwatchには、Selenium WebDriverを操作する独自のアプローチもあります。このツールは、サーバー、アサーションツール、さまざまなサポートツールを備えた独自のテストフレームワークを提供します。 Nightwatchの主な機能は次のとおりです。

枠組み Nightwatchは、他のフレームワークとともに、独立したツールとして使用できます。これは、他のテクノロジーを使用せずに、そのツールを使用して機能テストを実行する場合に特に役立ちます。
構文ナイトウォッチには、非常にシンプルで読みやすい構文があります。
サポートとテクノロジー。 TypeScriptのサポートはありません。このライブラリは、他のライブラリよりもサポートがやや少ないという感じがあることに注意してください。

TestCafe

TestCafeは、Seleniumベースのツールの優れた代替手段です。このライブラリのコードは、2016年の終わりに公開されました。プログラミングを必要としないテストツールを提供するTestCafeの有料版がまだあることに注意してください。たとえば、これらはテストを記録するためのツールです。有料版はユーザーサポートも提供します。ライブラリコードが開かれる前に出された多くの古い出版物があり、閉じられたコードがその欠陥であると見なされることに注意する必要があります。

TestCafeはJSスクリプトとしてページに埋め込まれ、Seleniumのようにブラウザを制御しません。これにより、TestCafeをモバイルを含む任意のブラウザーで実行でき、JavaScriptの動作を完全に制御できます。

TestCafeライブラリはJavaScriptで記述されており、テストに焦点を当てています。現在は安定しており、十分な数の機会があると考えられていますが、現在活況を呈しています。主な機能を検討してください。

作業環境のクイックセットアップ。おそらく、TestCafeを使用するための作業環境の特別なセットアップは必要ないと言えます。ブラウザを開いてテストを開始するだけです。
さまざまなブラウザーのサポート、テスト自動化のプラットフォームサポート。 TestCafeは多くのブラウザーとデバイスをサポートし、さまざまなデバイスとブラウザーへのアクセスを提供するSourceLabsまたはBrowserStackプラットフォームで使用できます。特に、ユーザーインターフェイスなしでChromeとFirefoxでテストを実行することについて話します。
並列テスト。 TestCafeは、複数のブラウザーインスタンスで同時にテストを実行できます。このアプローチにより、テスト時間を大幅に短縮できます。
バグレポート。 TestCafeは、エラーを報告するための便利なツールを提供します。

生態系 TestCafeは、独自のテスト構造を使用します。これは非常に便利です。特に、ユーザーインターフェイステストは通常、他のテストとは別に実行されますが、誰もが好むわけではありません。

 import { Selector } from 'testcafe'; fixture `Getting Started`   .page `https://devexpress.github.io/testcafe/example` //    test('My first test', async t => {   await t       .typeText('#developer-name', 'John Smith')       .click('#submit-button')       .expect(Selector('#article-header').innerText)       .eql('Thank you, John Smith!') })

▍サイプレス

サイプレスはTestCafeと直接競合しています。このフレームワークはほぼ同じように機能し、ページのコードにテストを導入しますが、より現代的で柔軟で便利な方法でテストを試みます。サイプレスはより新しく、このフレームワークは最近、クローズドベータからパブリックベータに移行しました（2017年10月）が、多くの人がすでにそれを使用しています。サイプレスの主な機能は次のとおりです。

クロスブラウザのサポートはありません。現在サポートされているのはChromeのみです（ユーザーインターフェイスのないバージョンはサポートされていません）。ブラウザ間のサポートに向けた開発が進行中です。
高度なテスト機能の欠如。ここでは、TestCafeと比較して、まだ十分な並列テスト機能といくつかの追加ツールはありませんが、これらすべての外観は開発者の計画にあります。
ドキュメンテーションサイプレスには、よく書かれたわかりやすいドキュメントがあります。
. .

Mocha. Mocha . , , Mocha, , .

 describe('My First Cypress Test', function() { it("Gets, types and asserts", function() {   cy.visit('https://example.cypress.io')   cy.contains('type').click()   //     URL,   '/commands/actions'   cy.url().should('include', '/commands/actions')   //   ,        .   cy.get('.action-email')     .type('fake@email.com')     .should('have.value', 'fake@email.com') }) })

▍Puppeteer

Puppeteer — Node.js, Google. Node.js API Chrome .

— Chrome v59+, --headless

. , API , Puppeteer — , , JS-, Google .

, Firefox , 2017-, .

, Chrome Firefox . , TestCafe Karma.

Puppeteer :

. Puppeteer — , , .
パフォーマンス。 Puppeteer , Chrome, , , PhantomJS, WebKit.
. Chrome (, , Puppeteer) , Flash. , .

▍PhantomJS

PhantomJS Chromium , Chrome.

Puppeteer PhantomJS, , , PhantomJS, 2017, , - .

PhantomJS, Puppeteer? :

, , .
PhantomJS CasperJS. , PhantomJS.
PhantomJS WebKit, Chrome.
PhantomJS Flash, Chrome — .

▍Nightmare

Nightmare — , .

Nightmare Electron , PhantomJS, , Chromium . , Electron, , - JavaScript, HTML CSS.

, , Nightmare Chrome . Nightmare PhantomJS.

Nightmare:

 yield Nightmare() .goto('http://yahoo.com') .type('input[title="Search"]', 'github nightmare') .click('.searchsubmit')

PhantomJS:

 phantom.create(function (ph) { ph.createPage(function (page) {   page.open('http://yahoo.com', function (status) {     page.evaluate(       function () {         var el = document.querySelector('input[title="Search"]')         el.value = 'github nightmare'       },       function (result) {         page.evaluate(           function () {             var el = document.querySelector('.searchsubmit')             var event = document.createEvent('MouseEvent')             event.initEvent('click', true, false)             el.dispatchEvent(event)           },           function (result) {             ph.exit()           }         ) // page.evaluate       }     ) // page.evaluate   }) // page.open }) // ph.createPage }) // phantom.create

▍Casper

Casper — , PhantomJS SlimerJS ( , Phantom, Firefox Gecko). Casper -, , Phantom Slimer.

Slimer , . 2017- -, 1.0.0-beta.1, Firefox . Slimer.

, , , Casper PhantomJS Puppeteer Chrome, Firefox. , .

▍CodeceptJS

CodeceptJS , CucumberJS, API. , , .

CodeceptJS:

 Scenario('login with generated password', async (I) => { I.fillField('email', 'miles@davis.com'); I.click('Generate Password'); const password = await I.grabTextFrom('#password'); I.click('Login'); I.fillField('email', 'miles@davis.com'); I.fillField('password', password); I.click('Log in!'); I.see('Hello, Miles'); });

, : WebDriverIO , Protractor , Nightmare , Appium , Puppeteer . .

, , CodeceptJS.

まとめ

-. ? , , - , , , . , , : , , .

親愛なる読者！ JS-?

[ブックマーク] JavaScriptプロジェクトをテストするためのツール