End-to-End-Tests für Java React-Anwendungen

End-to-End (E2E)-Tests für eine Java- und React-Anwendung: Vollständiger Leitfaden

End-to-End (E2E)-Tests stellen sicher, dass Ihre Anwendung als Ganzes funktioniert, indem echte Benutzerworkflows im Backend (Java) und Frontend (React) simuliert werden. In diesem Leitfaden werden die Tools, die Einrichtung und die Schritte zur Implementierung von E2E-Tests behandelt.

---

1. Die richtigen Werkzeuge auswählen

Verwenden Sie für E2E-Tests in einem Java-React-Stack Tools, die sowohl mit dem Backend als auch mit dem Frontend interagieren können:

• Frontend-Testtools:

  • Cypress: Modernes E2E-Testtool für Frontend-Tests.
  • Dramatiker oder Puppenspieler: Headless Browser-Automatisierung.
  • Selenium: Browser-Automatisierung, die sowohl für Frontend als auch Backend funktioniert.

• Backend-Testtools:

  • REST Assured: Testen Sie REST-APIs in Java.
  • JUnit: Java-Testframework für Backend-Logik.

• Integrationstools:

  • TestContainer: Zum Testen mit Docker-Containern.
  • MockServer: Zum Verspotten von APIs während Tests.
  • Allure: Zur Meldung von Testergebnissen.

---

2. Einrichten der Umgebung

Backend (Java):

1. Stellen Sie sicher, dass die API getestet ist:
   • Verwenden Sie JUnit für Unit- und Integrationstests.
   • Verwenden Sie REST Assured für API-Tests.

Beispiel (REST Assured-Test für eine 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. Mock External Dependencies:

   • Verwenden Sie MockServer oder WireMock, um externe APIs zu verspotten.

2. Backend Containerisieren:

   • Verwenden Sie Docker, um eine konsistente Umgebung für Backend-Tests zu erstellen.
   • Beispiel für eine Docker-Datei:

    FROM openjdk:11
    COPY target/myapp.jar /app/myapp.jar
    ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]
   

Frontend (Reagieren):

1. Cypress installieren:

   npm install cypress --save-dev

1. Cypress-Tests erstellen:

   • Beispiel: Anmeldefunktion testen:

    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. Mock-APIs in Cypress:

   • Verwenden Sie cy.intercept(), um Backend-API-Aufrufe abzufangen.

   cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });

---

3. Schreiben von E2E-Tests

Szenario 1: Benutzer-Login-Workflow

1. Backend-Test:

   • Stellen Sie sicher, dass die /login-API ein gültiges Token zurückgibt.
   • Beispiel:

    given()
        .contentType("application/json")
        .body("{ \"username\": \"admin\", \"password\": \"password123\" }")
        .when()
        .post("/login")
        .then()
        .statusCode(200)
        .body("token", notNullValue());
   

2. Frontend-Test:

   • Simulieren Sie Benutzereingaben auf der Anmeldeseite und validieren Sie die Weiterleitung.

Szenario 2: Element erstellen und anzeigen

1. Backend-Test:
   • Validieren Sie, dass die /createItem-API Daten speichert und die /items-API sie abruft.

   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. Frontend-Test:
   • Überprüfen Sie, ob auf der Benutzeroberfläche das erstellte Element angezeigt wird.

 FROM openjdk:11
 COPY target/myapp.jar /app/myapp.jar
 ENTRYPOINT ["java", "-jar", "/app/myapp.jar"]

---

4. Integration von E2E-Tests mit CI/CD

1. Backend-Tests in CI:

   • Verwenden Sie JUnit und eine Testdatenbank:

      npm install cypress --save-dev
   

2. Frontend-Tests in CI:

   • Führen Sie Cypress-Tests durch:

    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. Vollständige Integration:

   • Verwenden Sie Docker Compose, um Backend und Frontend zusammen auszuführen:

      cy.intercept('POST', '/api/login', { statusCode: 200, body: { token: 'fake-token' } });
   

4. GitHub-Aktionen für CI:
   

 given()
     .contentType("application/json")
     .body("{ \"username\": \"admin\", \"password\": \"password123\" }")
     .when()
     .post("/login")
     .then()
     .statusCode(200)
     .body("token", notNullValue());

---

5. Berichterstattung

• Allure für Java:

  • Integrieren Sie Allure für detaillierte Testberichte:

     @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 Dashboard:

  • Verwenden Sie das Cypress Dashboard, um Testläufe zu verfolgen:

     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. Best Practices

1. Machen Sie externe APIs während der Tests nach, um Unzulänglichkeiten zu vermeiden.
2. Verwenden Sie eine dedizierte Testdatenbank für Backend-Tests.
3. Parallelisieren Sie Tests in CI, um Zeit zu sparen.
4. Testdaten nach jedem Lauf bereinigen.

---

Dieser Leitfaden richtet ein robustes E2E-Testframework für eine Java- und React-Anwendung ein. Lassen Sie mich wissen, wenn Sie Hilfe bei der Implementierung eines bestimmten Teils benötigen!

Das obige ist der detaillierte Inhalt vonEnd-to-End-Tests für Java React-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!