サイプレスを使用して、Reactアプリケーションのテストを作成します

エンドツーエンド（E2E）テストは、アプリケーションの流れを最初から最後まで検証します。手動テストの代わりに、継続的な統合（CI）がこのプロセスを自動化します。コードを記述し、保存し、ツールが既存の機能を壊さないようにします。 Cypressは、特にReactのような最新のJavaScriptライブラリのために、このプロセスを簡素化する強力なE2Eテストフレームワークです。

テストアプリケーションの設定

このチュートリアルでは、サンプルTODOアプリケーションを使用しています。従うようにリポジトリをクローンします。

 git clone [電子メール保護]：kinsomicrote/cypress-reacttutorial.git

ディレクトリに移動し、依存関係をインストールします。

 CDサイプレス反応チュートリアル
糸インストール

サイプレスのインストール：

糸はサイプレスを追加します-DEV

オープンサイプレス：

 node_modules/.bin/cypress open

アクセスしやすくするには、このスクリプトをpackage.jsonに追加します。

 「スクリプト」：{
  「サイプレス」：「サイプレスオープン」
}

yarn cypressを実行してサイプレスを開きます。 yarn start 。

cypress/integration/init.spec.jsで基本的なテストを作成しましょう：

説明（ 'cypress'、（）=> {
  それ（ 'は動作している'、（）=> {
    期待（true）.to.equal（true）;
  }）;
}）;

これは、サイプレスが機能していることを確認します。それでは、アプリにアクセスしてテストしましょう。

それ（ 'アプリに訪問'、（）=> {
  cy.visit（ 'http：// localhost：3000'）;
}）;

URLの繰り返しを避けるために、 cypress.jsonにベースURLを設定します。

 {
  「baseurl」：「http：// localhost：3000」
}

これで、次のテストを簡素化できます。

それ（ 'アプリに訪問'、（）=> {
  cy.visit（ '/'）;
}）;

フォームコントロールと入力をテストします

ユーザーインタラクションをテストするためにcypress/integration/form.spec.jsを作成します。

説明（ 'form'、（）=> {
  前に（（）=> {
    cy.visit（ '/'）;
  }）;

  それ（ '入力に焦点を合わせます'、（）=> {
    cy.focused（）。（ 'have.class'、 'form-control'）;
  }）;

  それ（ '入力を受け入れる'、（）=> {
    const input = "サイプレスについて学ぶ";
    cy.get（ '。form-control'）
      .Type（入力）
      。
  }）;

  それ（ 'dosis of todos'、（）=> {
    cy.get（ 'li'）。
  }）;

  それ（ '新しいtodoを追加します'、（）=> {
    const input = "サイプレスについて学ぶ";
    cy.get（ '。form-control'）
      .Type（入力）
      .type（ '{enter}'）
      .get（ 'li'）
      .should（ 'have.length'、3）;
  }）;

  it（ 'deletes a todo'、（）=> {
    cy.get（ 'li'）
      。初め（）
      .find（ '。btn-danger'）
      。クリック（）
      .get（ 'li'）
      .should（ 'have.length'、1）;
  }）;

  それ（ 'すべてのtodosを削除'、（）=> {
    cy.get（ 'li'）
      。初め（）
      .find（ '。btn-danger'）
      。クリック（）
      .get（ 'li'）
      。初め（）
      .find（ '。btn-danger'）
      。クリック（）
      .get（'。No-Task '）
      。
  }）;
}）;

これらのテストでは、入力フォーカス、入力の受け入れ、初期TODOカウント、新しいTODOの追加、単一のTODOの削除、すべてのTODOの削除をカバーしています。

ネットワークリクエストのテスト

ネットワークリクエストのテストにより、データフェッチが正しく機能するようになります。たとえば、JSONプレースホルダーAPIを使用してください。

説明（ 'request'、（）=> {
  それ（ 'APIからランダムユーザーを表示'、（）=> {
    cy.request（ 'https://jsonplaceholder.typicode.com/users'）
      .should（（respons）=> {
        expect（response.status）.to.eq（200）;
        期待（Response.body）.to.have.length（10）;
        expect（response）.to.have.property（ 'headers'）;
        expect（response）.to.have.property（ 'duration'）;
      }）;
  }）;
}）;

これにより、API応答ステータス、データの長さ、および応答プロパティが検証されます。

コマンドラインからの実行テスト

ターミナルからサイプレステストを実行します。

 NPXサイプレスの実行

特定のテストを実行するには：

 NPXサイプレスRUN -SPEC "Cypress/Integration/form.spec.js"

これにより、テスト結果のコマンドラインの概要が提供されます。より高度なコマンドラインオプションについては、サイプレスのドキュメントを参照してください。

結論

CypressはE2Eテストを簡素化し、開発者にとってアクセスしやすく、有益にします。このチュートリアルでは、基本的なテストから中間テスト手法を示しており、その機能をさらに調査することを奨励しています。より高度な機能とベストプラクティスについては、サイプレスのドキュメントを参照してください。

以上がサイプレスを使用して、Reactアプリケーションのテストを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。