[React] cypress를 활용한 React 테스트 (feat. 시나리오 테스트, E2E Test)

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

 

개발을 마치자마자 문제라는 녀석이 끼어들기 시작한다

개발 자체가 긴급해서 테스트를 직접해가면서, 개발을 마쳤다.

마치고 나니까, Front-end 테스트가 누락됨에 따라, 컴포넌트를 추가/수정하는 과정에서 에러가 발생하는 경우가 있었다.
꼭 Front문제라기 보담은, Back-end 개발자가 api를 변경한 경우에도 종종 문제가 발생하는 경우가 있었다.

모든 문제를 육안으로 모두 체크할 수는 없다

최소 비즈니스 로직에 기반한 테스트

그래서 생각한 것이 비즈니스 로직만을 테스트하는 것이였다. 비즈니스 로직은 여러가지 방법으로 테스트할 수 있는데, 접근할 수 있는 페이지별로 성공해야 하는 필수적인 시나리오를 최소 비즈니스 로직으로 설정했다. 😀  (내가 기획을 해본 경험으로는 이게 정답이야...)

그래서 나온 페이지는 총 3개.

1. 메인화면 (모든 버튼 클릭)
2. 서브메뉴 1
3. 서브메뉴 2

 

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

1. Jest
2. React Testing Library
3. cypress

1번, 2번은 함수를 테스트하기에 좋은 것 같다. 컴포넌트를 테스트하는 것도 가능하지만, 이렇게 하면, 이렇게 된다. 싶은 Unit 테스트 용으로 추천한다. (ex. counter, 자리수 쉼표 넣기 같은...)

3번 cypress는 E2E, 흔히 End to End 라 부르는 종단(End point) 간 테스트에 매우 좋다. 종단 간 테스트는 다른 말로 사용자 입장에서 테스트하는 것이다. 사용자에게 노출되는 부분을 직접 점검하는 것이다. 

E2E Test

내 생각에 cypress 같이 E2E 방식말고 다른 테스트 방식은 절대적인 단점이 있을 것이라 생각한다. 가끔이지만, Unit test 같은 경우는 컴포넌트가 렌더된 상태에서 발생하는 에러는 확인하는 것이 불가능할 수 있다. 이 단점을 확실히 막는 것이 E2E 테스트이다.

 

cypress

Cypress는 Selenium WebDriver와는 전혀 다른 목적을 갖는 도구이며, 프론트엔드 개발자들이 개발 단계에서 사용하기에 최적화된 도구라고 할 수 있다.

INSTALL

// devDependencies에 추가

npm install cypress --save-dev

EDIT Script

// script추가 in package.json

"scripts": {
  /* ... */
  "test": "cypress open"  // interactive mode. 
  //  CLI로 실행하는 모드도 있지만, 직접 로그인이 필요해서 사용하지 않았다.
}

script를 추가한다. CLI > yarn test 같은 명령어로 실행하기 위해서이다. 

Run Test

$ yarn test

Screenshot

실행하면, 위와 같은 Electron으로 만들어진 Desktop 프로그램으로 실행된 화면이 나온다.

 

EDIT cypress.json 

// cypress.json - 먼저 cypress.json에 세팅한다.

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

테스트 파일

// 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 태그에 "뽀로로"라고 입력한다.
  });
  /* ... */
});

cy.get 명령어는 기본적으로 querySelector의 기능과 똑같은 것으로 보인다. cy 객체를 사용해서 좀 더 편리하게 가져올 수 있다.

경험을 전해요

1. describe는 추가 가능하다. 주제별로 describe를 나누어서 구분하면서 문서를 작성하는 것이 좋겠다.
2. iframe 관련 코드는 작성하지 않았다. 테스트 하는 페이지별로 iframe 구조가 다 다르기 때문에 도움이 안될 것 같아서이다. 참조 경로를 참고할 것.
3. 테스트 중 Log-In 이 필요할 경우, 로그인을 직접하고 다시 테스트 코드를 동작시키는 것도 가능하다. capcha가 있는 경우는 직접 로그인하고 다시 테스트 시작.
4. Material UI에서도 잘 되는 것을 확인함.
5. cypress-iframe은 자체적인 iframe에만 쓸모있는 패키지 같은 느낌이었음. (비추)

 

결론

1. 각 페이지별로 테스트 코드를 작성할 것.
2. 최종적으로 1개의 테스트 코드에 describe를 여러개 작성할 것.
3. 프로젝트가 추가/수정될 때마다 일괄 테스트를 하는 것이 유용하다.

 

참조

iFrame 접근해야하면, 이 경로를 참고. : https://bit.ly/3BcCZ33

E2E Test 설명글 https://bit.ly/2WcqA0b

TOAST UI Cypress관련 글 https://bit.ly/3mpM1oX

 

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

*유용했으면 댓글 좀 작성해주시오! 헷