End-To-End Testing for Java React Applications

End-to-End (E2E) Testing for a Java and React Application: Complete Guide

End-to-End (E2E) testing ensures that your application works as a whole by simulating real user workflows across the backend (Java) and frontend (React). This guide covers the tools, setup, and steps for implementing E2E testing.

---

1. Choosing the Right Tools

For E2E testing in a Java-React stack, use tools that can interact with both the backend and frontend:

• Frontend Testing Tools:

  • Cypress: Modern E2E testing tool for frontend testing.
  • Playwright or Puppeteer: Headless browser automation.
  • Selenium: Browser automation that works for both frontend and backend.

• Backend Testing Tools:

  • REST Assured: Test REST APIs in Java.
  • JUnit: Java testing framework for backend logic.

• Integration Tools:

  • TestContainers: For testing with Docker containers.
  • MockServer: To mock APIs during tests.
  • Allure: For reporting test results.

---

2. Setting Up the Environment

Backend (Java):

1. Ensure API is Tested:
   • Use JUnit for unit and integration tests.
   • Use REST Assured for API tests.

Example (REST Assured test for an 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:

   • Use MockServer or WireMock to mock external APIs.

2. Containerize Backend:

   • Use Docker to create a consistent environment for backend testing.
   • Example Dockerfile:

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

Frontend (React):

1. Install Cypress:

   npm install cypress --save-dev

1. Create Cypress Tests:

   • Example: Testing login functionality:

    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:

   • Use cy.intercept() to intercept backend API calls.

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

---

3. Writing E2E Tests

Scenario 1: User Login Workflow

1. Backend Test:

   • Ensure /login API returns a valid token.
   • Example:

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

2. Frontend Test:

   • Simulate user input on the login page and validate the redirection.

Scenario 2: Create and Display Item

1. Backend Test:
   • Validate the /createItem API stores data and /items API retrieves it.

   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:
   • Verify the UI shows the created item.

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

---

4. Integrating E2E Tests with CI/CD

1. Backend Tests in CI:

   • Use JUnit and a test database:

      npm install cypress --save-dev
   

2. Frontend Tests in CI:

   • Run Cypress tests:

    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. Full Integration:

   • Use Docker Compose to run backend and frontend together:

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

4. GitHub Actions for CI:
   

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

---

5. Reporting

• Allure for Java:

  • Integrate Allure for detailed test reports:

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

  • Use the Cypress Dashboard to track test runs:

     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. Mock external APIs during tests to avoid flakiness.
2. Use a dedicated test database for backend testing.
3. Parallelize tests in CI to save time.
4. Clean up test data after each run.

---

This guide sets up a robust E2E testing framework for a Java and React application. Let me know if you need help implementing any specific part!

The above is the detailed content of End-To-End Testing for Java React Applications. For more information, please follow other related articles on the PHP Chinese website!