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!