React アプリケーションで Cypress を使用してエンドツーエンド テストを作成する方法

React アプリケーションで Cypress を使用してエンドツーエンド テストを作成する方法
あなたのような読者が MUO をサポートします。当社サイトのリンクを使用して商品を購入すると、アフィリエイト手数料が発生する場合があります。 続きを読む。

フロントエンド開発には、視覚的に魅力的で機能的なクライアント向けアプリの構築が含まれます。しかし、落とし穴があります。これらのアプリケーションは、ユーザーがシームレスなエクスペリエンスを享受できるようにする必要があります。





今日のMUOビデオ スクロールしてコンテンツを続けてください

単体テストと統合テストはアプリケーションの機能を検証するために不可欠ですが、一般的なユーザー操作を完全には捕捉できない場合があります。ユーザー ジャーニーを実際にシミュレートするには、実際のユーザー インタラクションを再現するエンドツーエンド テストを実行する必要があります。これにより、アプリケーションは最初から最後まで意図したとおりに実行されます。





他の本に基づいたおすすめの本

Cypress を使用したエンドツーエンド テストの開始

フロントエンド アプリケーションにおけるエンドツーエンド テストの主な目的は、ビジネス ロジックの実装の詳細ではなく、結果を検証することです。





ログインフォームを例に挙げます。理想的には、ログイン画面が想定どおりに表示され、意図した動作を行うかどうかをテストします。基本的に、基礎となる技術的な詳細は重要ではありません。最終目標は、単純にユーザーの立場に立って、ユーザーのエクスペリエンス全体を評価することです。

 公式サイトのサイプレスホームページ

ヒノキ は、いくつかの機能と互換性のある優れた自動テスト フレームワークです。 最も人気のある JavaScript フレームワーク 。ブラウザーで直接テストを実行できる機能と、包括的なテスト機能スイートにより、テストがシームレスかつ効率的に行われます。また、次のようなさまざまなテスト手法もサポートしています。



  • 単体テスト
  • エンドツーエンドのテスト
  • 結合テスト

React アプリケーションのエンドツーエンドのテストを作成するには、次のユーザー ストーリーを考慮してください。

遅い起動ウィンドウを修正する方法10
  • ユーザーには、対応する送信ボタンのある入力フィールドが表示されます。
  • ユーザーは入力フィールドに検索クエリを入力できます。
  • 送信ボタンをクリックすると、入力フィールドのすぐ下に項目のリストが表示されます。

これらのユーザー ストーリーに従うことで、ユーザーが製品を検索できるシンプルな React アプリケーションを構築できます。アプリは製品データを ダミーJSON API そしてそれをページ上にレンダリングします。