[Test] E2E 테스트를 위한 cypress

Photo by Glenn Carstens-Peters on Unsplash

이번에 과제 형태로 공부를 하면서 cypress로 E2E 테스트를 해보게 되었다.

기존에는 Jest와 같은 Unit테스트는 해보았지만 E2E 테스트는 처음이라 신기하기도 하고 재미도 있었다.

특히 나처럼 자주 리팩터링을 한다던지,
기능 추가 및 수정이 많은 상황이면 오히려 더욱 필요하다 생각이 들었다.

E2E 테스트?

• 실제 사용자가 실행하는 것처럼 사용자 상황을 가정해서 테스트 하는 것이다.

무엇이 좋은가?

• 일일이 사용자 상황을 고려하여 직접 눌러가며 테스트 하지않고 자동으로 테스트를 할 수 있다.
• 다양한 사용자 상황을 만들어 두면 리팩터링시 용이하다.
• 검증에 대한 시간이 단축된다.

화면 예시

브라우저에서 테스트 예시

command에서 테스트 예시

NEXTSTEP JavaScript Vending machine

설치

1. 먼저 cypress를 사용하기 위해 라이브러리를 추가한다.

yarn add -D cypress

2. cypress 설정 파일을 작성한다.
주로 cypress 옵션을 정의한다.

3. root 최상위 폴더에 cypress 폴더를 만든다.

4. /cypress/integration 폴더 내에 [파일명].spec.js 형태로 파일을 생성하여 테스트케이스를 작성한다.

작성 예시

5. 작성이 완료된 후 아래의 명령어로 테스트를 실행시킬 수 있다.

cypress open // 브라우저 환경에서 테스트
cypress run  // Command 환경에서 테스트

cypress는 E2E 뿐만아니라 통합,단위 테스트도 가능하다고 하는데
아직까지는 사용해 본적이 없다.
점차 사용해가면서 여러가지 기능을 사용해 봐야겠다.

코드 예시

참고 링크

https://docs.cypress.io/api/commands/contains