ホームページ > Java > &#&チュートリアル > Java React アプリケーションのエンドツーエンドのテスト

Java React アプリケーションのエンドツーエンドのテスト

Barbara Streisand
リリース: 2024-11-25 08:28:10
オリジナル
742 人が閲覧しました

End-To-End Testing for Java React Applications

Java および React アプリケーションのエンドツーエンド (E2E) テスト: 完全ガイド

エンドツーエンド (E2E) テストでは、バックエンド (Java) とフロントエンド (React) にわたる実際のユーザーのワークフローをシミュレートすることで、アプリケーションが全体として動作することを確認します。このガイドでは、E2E テストを実装するためのツール、セットアップ、手順について説明します。


1.適切なツールの選択

Java-React スタックでの E2E テストの場合は、バックエンドとフロントエンドの両方と対話できるツールを使用します。

  • フロントエンド テスト ツール:

    • Cypress: フロントエンド テスト用の最新の E2E テスト ツール。
    • 劇作家 または 人形遣い: ヘッドレスブラウザの自動化。
    • Selenium: フロントエンドとバックエンドの両方で機能するブラウザ自動化。
  • バックエンド テスト ツール:

    • REST 保証: Java で REST API をテストします。
    • JUnit: バックエンド ロジック用の Java テスト フレームワーク。
  • 統合ツール:

    • TestContainers: Docker コンテナを使用したテスト用。
    • MockServer: テスト中に API をモックします。
    • Allure: テスト結果の報告用。

2.環境のセットアップ

バックエンド (Java):

  1. API がテストされていることを確認します:
    • 単体テストと統合テストには JUnit を使用します。
    • API テストには REST Assured を使用します。

例 (API の REST 保証テスト):

   import io.restassured.RestAssured;
   import org.junit.jupiter.api.Test;

   import static io.restassured.RestAssured.given;
   import static org.hamcrest.Matchers.equalTo;

   public class ApiTest {
       @Test
       public void testGetUser() {
           RestAssured.baseURI = "http://localhost:8080";
           given()
               .when()
               .get("/users/1")
               .then()
               .statusCode(200)
               .body("name", equalTo("John Doe"));
       }
   }
ログイン後にコピー
ログイン後にコピー
  1. 外部依存関係のモック:

    • MockServer または WireMock を使用して外部 API をモックします。
  2. バックエンドのコンテナ化:

    • Docker を使用して、バックエンド テスト用の一貫した環境を作成します。
    • Dockerfile の例:
     FROM openjdk:11
     COPY target/myapp.jar /app/myapp.jar
     ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]
    
    ログイン後にコピー
    ログイン後にコピー

フロントエンド (反応):

  1. Cypress をインストールします:
   npm install cypress --save-dev
ログイン後にコピー
ログイン後にコピー
  1. Cypress テストの作成:

    • 例: ログイン機能のテスト:
     describe('Login Page', () => {
       it('should log in successfully', () => {
         cy.visit('http://localhost:3000/login');
         cy.get('input[name="username"]').type('admin');
         cy.get('input[name="password"]').type('password123');
         cy.get('button[type="submit"]').click();
         cy.url().should('include', '/dashboard');
       });
     });
    
    ログイン後にコピー
    ログイン後にコピー
  2. Cypress のモック API:

    • cy.intercept() を使用してバックエンド API 呼び出しをインターセプトします。
   cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });
ログイン後にコピー
ログイン後にコピー

3. E2E テストの作成

シナリオ 1: ユーザー ログイン ワークフロー

  1. バックエンド テスト:

    • /login API が有効なトークンを返すようにしてください。
    • 例:
     given()
         .contentType("application/json")
         .body("{ \"username\": \"admin\", \"password\": \"password123\" }")
         .when()
         .post("/login")
         .then()
         .statusCode(200)
         .body("token", notNullValue());
    
    ログイン後にコピー
    ログイン後にコピー
  2. フロントエンド テスト:

    • ログイン ページでのユーザー入力をシミュレートし、リダイレクトを検証します。

シナリオ 2: アイテムの作成と表示

  1. バックエンドテスト:
    • /createItem API がデータを保存し、/items API がデータを取得することを検証します。
   import io.restassured.RestAssured;
   import org.junit.jupiter.api.Test;

   import static io.restassured.RestAssured.given;
   import static org.hamcrest.Matchers.equalTo;

   public class ApiTest {
       @Test
       public void testGetUser() {
           RestAssured.baseURI = "http://localhost:8080";
           given()
               .when()
               .get("/users/1")
               .then()
               .statusCode(200)
               .body("name", equalTo("John Doe"));
       }
   }
ログイン後にコピー
ログイン後にコピー
  1. フロントエンド テスト:
    • 作成されたアイテムが UI に表示されていることを確認します。
 FROM openjdk:11
 COPY target/myapp.jar /app/myapp.jar
 ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]
ログイン後にコピー
ログイン後にコピー

4. E2E テストと CI/CD の統合

  1. CI のバックエンド テスト:

    • JUnit とテスト データベースを使用します。
       npm install cypress --save-dev
    
    ログイン後にコピー
    ログイン後にコピー
  2. CI でのフロントエンド テスト:

    • Cypress テストを実行します。
     describe('Login Page', () => {
       it('should log in successfully', () => {
         cy.visit('http://localhost:3000/login');
         cy.get('input[name="username"]').type('admin');
         cy.get('input[name="password"]').type('password123');
         cy.get('button[type="submit"]').click();
         cy.url().should('include', '/dashboard');
       });
     });
    
    ログイン後にコピー
    ログイン後にコピー
  3. 完全統合:

    • Docker Compose を使用してバックエンドとフロントエンドを一緒に実行します。
       cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });
    
    ログイン後にコピー
    ログイン後にコピー
  4. CI 用の GitHub アクション:

 given()
     .contentType("application/json")
     .body("{ \"username\": \"admin\", \"password\": \"password123\" }")
     .when()
     .post("/login")
     .then()
     .statusCode(200)
     .body("token", notNullValue());
ログイン後にコピー
ログイン後にコピー

5.報告

  • Java の魅力:

    • 詳細なテスト レポートを作成するには、Allure を統合します。
       @Test
       public void testCreateAndRetrieveItem() {
           String itemJson = "{ \"name\": \"Test Item\" }";
    
           // Create Item
           given()
               .contentType("application/json")
               .body(itemJson)
               .post("/createItem")
               .then()
               .statusCode(201);
    
           // Retrieve Items
           given()
               .get("/items")
               .then()
               .statusCode(200)
               .body("[0].name", equalTo("Test Item"));
       }
    
    ログイン後にコピー
  • サイプレス ダッシュボード:

    • Cypress ダッシュボードを使用してテストの実行を追跡します。
       describe('Item Management', () => {
         it('should display the newly created item', () => {
           cy.visit('http://localhost:3000/items');
           cy.get('button#create-item').click();
           cy.get('input[name="itemName"]').type('Test Item');
           cy.get('button#save-item').click();
           cy.contains('Test Item').should('exist');
         });
       });
    
    ログイン後にコピー

6.ベストプラクティス

  1. 不安定さを避けるために、テスト中に外部 API をモックします。
  2. バックエンド テストには専用のテスト データベースを使用します。
  3. CI でテストを並列化して時間を節約します。
  4. 実行のたびにテスト データをクリーンアップします。

このガイドでは、Java および React アプリケーション用の堅牢な E2E テスト フレームワークをセットアップします。特定の部分の実装にサポートが必要な場合はお知らせください。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート