Jest의 한계점과 Cypress(UI)

일단 테스트의 종류가 뭐가 있는지 알아보자. 

유닛 테스트	코드의 개별 단위가 올바른지 확인	함수, 메서드, 컴포넌트	가장 빠름	Jest, Mocha 등
통합 테스트	여러 유닛의 결합이 잘 되는지 확인	API, 모듈 간 연동	중간	Jest, Supertest 등
E2E 테스트	전체 애플리케이션 흐름이 문제없는지 확인	사용자 관점, 전체 시스템	가장 느림	Cypress, Playwright 등

 

 

Jest는 주로 **유닛 테스트(Unit Test)**와 **통합 테스트(Integration Test)**에 많이 쓰이긴 하지만,

기본적으로 E2E 테스트(End-to-End Test)도 가능하다.

하지만 E2E 테스트에 특화된 도구인 Playwright나 Cypress 같은 툴에 비해 좀 번거로운 점이 있을 수 있는데

 

Jest는 기본적으로 DOM 환경에서 작동하므로, E2E 테스트를 하려면 jsdom 대신 실제 브라우저 환경이나 Node.js 기반 서버 환경을 구성해야 한다.(pupeteer도 깔아야 한다...)

 

이번엔 UI만 볼거니까 대충 이런 식으로 돌아간다고 생각해주면 좋다.

 

 

따라서 E2E환경 테스트를 위해 Cypress를 설치하기로 했다.

신기한 점이 많았는데 일단 초기 세팅하면 이런 화면이 반겨준다.

 

 

 

나는 E2E 테스트를 할거니 왼쪽을 눌렀고

Chrome으로 할건지 Elctron으로 할 건지 고르라고 한다.

크롬으로 선택하고 Start E2E Testing in Chrome을 눌러준다.

이런 창이 크롬창이 하나 열린다.

Gath Client를 클릭해보겠다.

 

 

왼쪽에 테스트 목록이 뜨고 오른쪽엔 렌더링 되는 화면이 나온다.

오류가 뜨면 왼쪽에 콘솔창같이 생긴 곳에서 오류를 내뱉어준다.