config : cypress 셋팅 #126
config : cypress 셋팅 #126
Conversation
There was a problem hiding this comment.
@chojooyoung 넴~~ 설정 고생하셨습니당!!!
- 브라우저 설정 추가 필요 (현재 브라우저 설정이 안되어 있어서 제 환경에서는 일렉트론, 파이어폭스로 노출이 됩니다. ㅜㅜ)
위처럼 브라우저 설정이랑 코멘트 확인 부탁드립니당!
- 디렉토리 구조 좋습니당 ㅎㅎ
|
@chojooyoung 혹시 이슈 재현은 어떻게 해볼 수 있을까요!? |
e2e 폴더안 tsconfig 파일을 지워보시거나, |
|
주영넴 추가로 PR명 issue 명과 통일 부탁드려용 🙇♀️!! |
|
@chojooyoung 주영넴 크롬으로 실행하면 아래 이미지처럼 보여서 아예 브라우저별 설정 파일을 따로 해주어야할 것 같아요! Ref: https://docs.cypress.io/guides/guides/launching-browsers#Customize-available-browsers 
|
오 제가 이해가 안되는데, cypress 에서 지원하는 브라우저의 경로를 못찾으면 저렇게 뜨는거 같은데, |
🔗 이슈 번호
⛳ 구현 사항
cypress 셋팅을 하였습니다~
(+ develop pull 후 린트 룰 수정 pr 로 인한 merge 추가)
📚 구현 설명
yarn cypress입력 후 실행⏳ 실행 화면
yarn cypress실행 후e2e선택 후브라우저, 테스트 파일 선택하면 테스트 시작
💡 코드 리뷰 포인트
폴더구조
e2e - cypress root
디렉토리를 일단 제가 좋다고 생각한 형태로 짜봤는데, 이 부분에 적극적 의견 부탁드립니다!
🔥 이슈와 해결 방안
jest 와 cypress 간의 type 충돌이 있었습니다.
(jest 는 설치되어 있고 cypress 를 설치했을때, .test.ts 로 된 jest의 테스트 함수들의 타입을 못찾는 현상)
두 개의 라이브러리가 전부 Mocha.Test 의 타입을 참조하기에, 공통으로 사용되는 함수들(it , toBe, toStrictEqual...)에서 충돌이 발생했는데요! (아마 CodeCeptJs 도 config.js => config.ts 셋팅때 안되었어서 해당 이슈가 원인으로 추측)
이를 해결위해 여러 레퍼런스를 찾아 해결 하였습니다.
cypress 공식문서,
githut 이슈
예시 레포
해결은
루트에 있는 tsconfig.json 파일에서 exclude 옵션을 사용하여 TypeScript 컴파일러가 cypress.config.ts를 무시하도록 설정하고,
cypress의 tsconfig는 e2e 폴더에서 따로 셋팅 해주어 분리했습니다!
다른방법으로
@jest/globals에서 expect 함수를 import 해오면 되는데,
매번 jest가 실행되어야 하는 .test 파일마다 import를 해야하기에 첫번째 방법을 선택했습니다~