Java React 애플리케이션에 대한 엔드투엔드 테스트

Java 및 React 애플리케이션에 대한 E2E(End-to-End) 테스트: 전체 가이드

엔드 투 엔드(E2E) 테스트는 백엔드(Java)와 프런트엔드(React)에서 실제 사용자 워크플로를 시뮬레이션하여 애플리케이션이 전체적으로 작동하는지 확인합니다. 이 가이드에서는 E2E 테스트 구현을 위한 도구, 설정 및 단계를 다룹니다.

---

1. 올바른 도구 선택

Java-React 스택에서 E2E 테스트를 수행하려면 백엔드와 프런트엔드 모두와 상호 작용할 수 있는 도구를 사용하세요.

• 프런트엔드 테스트 도구:

  • Cypress: 프런트엔드 테스트를 위한 최신 E2E 테스트 도구입니다.
  • 극작가 또는 Puppeteer: 헤드리스 브라우저 자동화.
  • Selenium: 프런트엔드와 백엔드 모두에서 작동하는 브라우저 자동화.

• 백엔드 테스트 도구:

  • REST 보장: Java에서 REST API를 테스트합니다.
  • JUnit: 백엔드 로직을 위한 Java 테스트 프레임워크

• 통합 도구:

  • TestContainers: Docker 컨테이너를 사용하여 테스트합니다.
  • MockServer: 테스트 중에 API를 모의합니다.
  • 얼루어: 테스트 결과 보고용

---

2. 환경설정

백엔드(자바):

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를 사용하여 백엔드 테스트를 위한 일관된 환경을 조성하세요.
   • 도커파일 예:

    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:

   • 백엔드 API 호출을 가로채려면 cy.intercept()를 사용하세요.

   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. CI/CD와 E2E 테스트 통합

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 대시보드:

  • 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!