E2E 테스트

E2E(End to End) 테스트는 개발물을 사용자 관점에서 테스트 하는 방법이다.

페이지에서 원하는 텍스트가 제대로 출력이 되었는지, 버튼을 클릭 했을 때 올바른 동작을 수행하는 지 등을 테스트 한다.

 

모든 애플리케이션은 다양한 시스템, DB와 연결되고 통합되어있다. 따라서 앱의 Workflow는 복잡해지며, 올바른 작동을 사용자 관점에서 확인하는 수요가 늘어났다.

E2E 테스트는 다양한 앱의 의존관계가 정확히 작동하는지 확인한다.

또한 정확한 정보가 다양한 시스템 컴포넌트 사이에서 전달하는지 체크할 수 있다.

 

접근할 수 있는 페이지별로 성공해야 하는 필수적인 시나리오를 최소 비즈니스 로직으로 설정했다.

사용했던 테스트 라이브러리 혹은 프레임워크

• Jest
• React Testing Library
• Cypress

1, 2번은 함수를 테스트하기에 좋은 것 같다. 컴포넌트를 테스트하는 것도 가능하지만, Unit 테스트 용으로 추천한다.

Cypress는 E2E, End to End라 부르는 종단 간 테스트에 매우 좋다.

종단 간 테스트는 다른 말로 사용자 입장에서 테스트하는 것이다. 사용자에게 노출되는 부분을 직접 점검하는 것이다.

 

Cypress

프론트엔드 개발자들이 개발 단계에서 사용하기에 최적화된 도구라고 할 수 있다.

npm install cypress --save-dev

// package.json
"scripts": {
	"test": "cypress open"
}

CLI로 실행하는 모드도 있지만, 직접 로그인이 필요해서 사용하지 않았다.

 

Test start

yarn test

 

EDIT cypress.json

// cypress.json
{
	"baseUrl": "http://localhost:3000", // 설정경로로 접속된다.
    "chromeWebSecurity": false // 외부 라이브러리를 사용할 경우, iframe에 접근하기 위해 설정 (미설정해도 무방)
}

 

Test File

// cypress > integration > 생성폴더 > 생성파일명.spec.js

describe("메인메뉴 테스트", () => {  // 대주제
  it("yarn start", () => {       // 테스트 설명하는 제목
    cy.exec("yarn start");       // CLI로 실행되는 함수 (cli > yarn start를 실행)
  });
  it("1. 메인화면 접속", () => {
    cy.visit("/");               // BaseURL경로를 접속하게 된다.
  });
  it("2. 태마 메뉴 클릭", () => {
    cy.contains("테마").click();  // "테마"라는 텍스트가 포함된 엘리먼트를 찾아서 클릭한다.
  });
  it("3. 이름 입력", () => {
    cy.get('input[name="name"]').type("뽀로로"); // name속성 값이 name인 input 태그에 "뽀로로"라고 입력한다.
  });
  /* ... */
});

 

1. 각 페이지 별로 테스트 코드를 작성할 것.

2. 최종적으로 1개의 테스트 코드에 describe를 여러개 작성할 것.

3. 프로젝트가 추가/수정될 때마다 일괄 테스트를 하는 것이 유용하다.

 

 

참조

https://blog.hbsmith.io/e2e-test-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-3c524862469d

E2E Test 알아보기

https://ui.toast.com/fe-guide/ko_TEST#e2e-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%8F%84%EA%B5%AC

테스트