다시 정리할 것
-
CRA로 프로젝트를 시작하면 jest와 rtl은 기본적으로 설치
-
Cypress는 설치 직후 E2E 테스트 코드는 바로 작성 가능 but 컴포넌트 테스트 하려면 추가적인 의존 모듈, 플러그인, config 설정이 필요
-
cypress는 test runner로서 mocha를 사용
-
jest는 터미널에서 watch & hot reload 사용
-
cypress는 브라우저에서 watch & hot reload 사용 -> 리액트 앱 로컬 서버를 띄우지 않은 상태에서도 크롬 개발자 도구를 보면서 개발이 가능
-
watch all은 둘다 가능 but cypress의 컴포넌트 테스트는 hot reload all files 사용 불가 (E2E test는 가능)
-
cypress의 유닛 테스트 watch & hot reload 모드는 jest의 watch & hot reload 모드 보다 메모리 사용량이 높다
-
둘다 DOM에서 테스트하지만 cypress는 브라우저 위에서 실행 -> 실제 유저 입장에서 다양한 브라우저와 다양한 상황에서 테스트할 수 있어서 더 유효하다
cypress 장점
- 크로스 브라우저 테스팅을 도와준다
- 디버깅에 브라우저 데브 툴을 쓸수있다
cypress는 E2E 테스트에 적합
rtl + jest는 컴포넌트 테스트에 적합하다는 의견도 있다.
결론
브라우저에서 사용자 입장으로 체크하기엔 cypress가 좋은 듯 하다.
하지만 문법적으로 유사하니 사이드 프로젝트나 혼자 공부할때는
CRA로 프로젝트를 생성하니까 그냥 jest + rtl을 사용하면 되겠다... 는 것이 나의 결론!
참고자료
https://uncertainty.oopy.io/8bcf9793-c828-483a-9326-e60826f73ed6
https://cocoder16.tistory.com/67
