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

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 サイトの他の関連記事を参照してください。