회사 프론트엔드 e2e test를 위해 cypress
를 도입했다.
무난무난한 설치과정을 거쳐 간단하게 실행을 시키고 메인페이지 접속을 확인했는데...
(뭐야 내 이미지 돌려줘요)
잘만 보이는 이미지가 cypress
에서 확인만 하면 안된다.
검색해도 이런 경우가 안나와가지고 고치는데 시간을 좀 썼다.
오늘은 혹시라도 나와 같은 상황인 사람에게 도움이 될까 게시글을 작성해본다.
우선, 회사 프론트엔드 테스트 환경은 아래와 같이 구성되어 있다.
msw
를 이용한mock api
를 사용해 api response 데이터 대체cypress
및msw
를 이용해 e2e test 진행
처음으로 의심한 것은 msw
의 mocking api 였다.
그러나 바로 개발자콘솔을 열어 확인해 봤는데 데이터는 정상적으로 받고 있었다.
그리고 cypress
가 아닌 일반적으로 브라우저에서 켰을 때는 잘 보였으므로 msw
문제는 아니었다.
(패쓰!)
앞서 말했듯이 cypress
를 실행하고 접근한 브라우저에서만 해당 현상이 발생됐다.
내가 사용하는 cypress
의 chromium
은 v105를 사용중이었다.
바로 한번 설치해서 테스트 해보자.....
했는데 이미 내가 쓰는 크롬의 버전이 v105였다.
즉 크로미움 버전도 원인이 아니라는 이야기이다.
대체 원인이 뭘까 고민하던 중, 아까 켜놨던 개발자모드에서 Network
를 한번 봐야겠다고 생각했다.
어쨌든 이미지의 url
은 잘 받아온 걸 확인했고, 그걸 브라우저가 불러오는 과정에서 뭔가 문제가 있어 안될 거라고 예측했기 때문이다.
(403이네? 403이야!!)
예상대로 브라우저에서 불러오는 과정에서 문제가 생겼다.
403 찾았다고 좋아하는 것도 잠깐... 해당 이미지 서버는 내가 만든 서버가 아니라 어떻게 할 수 없었다. 그렇다고 response header를 분석하자니...
(모르겠다)
그래서 일단 내가 사용하던 placeholder.com
에 접속해서 나와 비슷한 이슈가 있는지 찾아보려고 했는데...
!!!!!!!!
cypress
는 테스팅을 위해 자체적으로 프록시해서 요청하도록 되어있는 것 같았다.
그래서 cypress
를 켠 브라우저에서 다른 사이트를 접속하면 이런것도 확인된다.
내가 사용하던 placeholder.com
이라는 사이트가 이러한 환경에서의 요청을 비정상적인 접근으로 판단하고 애초에 차단을 했던 것이다.
이제 문제가 되는 걸 알았으니 이걸 변경만 해주면 된다.
내가 placeholder로 이 사이트를 썼던 이유는 아래처럼 이미지 크기가 이미지 내에 텍스트로 보여져서였다.
그래서 이거랑 비슷한 사이트 중 요청이 차단되지 않는 사이트를 찾아냈다.
이제 mock api
의 response
값 내의 링크를 이걸로 바꿔주면 잘 작동이 된다!
오예~ 알고보면 나는 코딩천재?
잠깐잠깐잠간갖잠가낙자짬간잠ㄴ간!!
여기까지 읽고 닫으려고 했던 사람은 조금만 더 읽어보자.
뭔가 이상한 점이 없는가?
현재 테스트가 격리되어 있지 않고 어디엔가 의존하고 있는 모습이다.
무슨말인지 모르겠으면 한번 다시 같이 생각해보자.
우리가 테스트 코드를 작성하고 테스트를 할때는 몇가지 꼭 지켜야 하는 점이 있다.
그 중 하나는 바로 테스트가 잘 격리되어 있는지 이다.
지금 테스트는 placeholder.com
서버 혹은 dummyimage.com
서버에 의존하고 있다.
즉 해당 서버가 문제가 있을 시에 애꿎은 우리 테스트가 안돌아간다는 얘기다.
이건 뭐
Backend
의존성 없애려고mock api
힘들게 만들었더니 또 다른 서버를 의존하는 아이러니한 상황이다.
때문에 이러한 테스트는 잘못된(=좋지않은) 테스트이다.
좋은 테스트로 바꾸기 위해 어떻게 해결해야 할 지 다시 생각해보자.
해결에 앞서 현재 상황은 다음과 같다.
1. 클라이언트가 서버에 이미지 링크 요청 (request)
2. 서버가 클라이언트에 이미지 링크 전달 (response)
3. 클라이언트는 받은 링크값을 img 태그의 src에 넣고 렌더링
흠... 링크를 받아
src
에 넣어주는 방식이니public
폴더에 테스트 이미지를 저장해두고/image/testImage.png
이런식으로 내려주면 되지 않을까?
안될 방법은 아니다.
하지만 조금 더 생각해보니 아래와 같은 문제점이 있다.
(해당 해결 방법은 현재 환경에 적합하다고 생각한 것이며, 회바회팀바팀프바프입니다.)
img
태그의 src
에는 링크 형식으로도 내릴 수 있지만, base 64
로 인코딩 한 값을 내려도 정상적으로 확인 가능하다.
쉽게 말하자면 이미지 파일을 문자열 형태로 내린다고 보면 된다.
이 방법을 사용하면 이미지 파일을 따로 저장하지도 않고 mock api
에서 자체적으로 내려줄 수 있으며, build에도 문제가 되지 않는다.
방법은 정말 간단하다.
나의 경우에는 이 사이트를 사용했다.
해당 사이트에 인코딩 하고 싶은 사진을 넣으면 친절하게 형식까지 맞춰서 값을 준다.
copy to clipboard
를 누르고 복사된 값을 src
에 넣어보면 잘 보이는 걸 확인할 수 있다.
(background-image 에 넣을거면 아래거를 복사하자)
(짤 킹받네)
테스트를 하는 것도 중요하지만 '잘' 하는 것도 정말 중요하다.
의미 없는 테스트를 작성하면 시간은 시간대로 쓰고 원했던 결과도 얻지 못한다.
이런 점들을 유의해서 올바른 테스트 코드를 짜보자!
+ 읽어주셔서 감사합니다.
+ 오타, 내용 지적, 피드백을 환영합니다. 많이 해주실 수록 제 성장의 밑거름이 됩니다.