Cypress에서 이미지 로딩 안될 때 (feat. 올바른 테스트)

황주현·2022년 9월 27일
1

테스트

목록 보기
1/1
post-thumbnail

들어가며

회사 프론트엔드 e2e test를 위해 cypress를 도입했다.
무난무난한 설치과정을 거쳐 간단하게 실행을 시키고 메인페이지 접속을 확인했는데...

(뭐야 내 이미지 돌려줘요)

잘만 보이는 이미지가 cypress에서 확인만 하면 안된다.
검색해도 이런 경우가 안나와가지고 고치는데 시간을 좀 썼다.

오늘은 혹시라도 나와 같은 상황인 사람에게 도움이 될까 게시글을 작성해본다.


문제찾기

환경

우선, 회사 프론트엔드 테스트 환경은 아래와 같이 구성되어 있다.

  • msw를 이용한 mock api를 사용해 api response 데이터 대체
  • cypressmsw를 이용해 e2e test 진행

mocking api가 문제인가?

처음으로 의심한 것은 msw의 mocking api 였다.
그러나 바로 개발자콘솔을 열어 확인해 봤는데 데이터는 정상적으로 받고 있었다.

그리고 cypress가 아닌 일반적으로 브라우저에서 켰을 때는 잘 보였으므로 msw 문제는 아니었다.

(패쓰!)



cypress의 chromium이 문제인가?

앞서 말했듯이 cypress를 실행하고 접근한 브라우저에서만 해당 현상이 발생됐다.
내가 사용하는 cypresschromiumv105를 사용중이었다.
바로 한번 설치해서 테스트 해보자.....

했는데 이미 내가 쓰는 크롬의 버전이 v105였다.
즉 크로미움 버전도 원인이 아니라는 이야기이다.



원인은 진짜 의외의 곳에

대체 원인이 뭘까 고민하던 중, 아까 켜놨던 개발자모드에서 Network를 한번 봐야겠다고 생각했다.

어쨌든 이미지의 url은 잘 받아온 걸 확인했고, 그걸 브라우저가 불러오는 과정에서 뭔가 문제가 있어 안될 거라고 예측했기 때문이다.


(403이네? 403이야!!)
예상대로 브라우저에서 불러오는 과정에서 문제가 생겼다.



근데 왜 403뜨는지 몰?루

403 찾았다고 좋아하는 것도 잠깐... 해당 이미지 서버는 내가 만든 서버가 아니라 어떻게 할 수 없었다. 그렇다고 response header를 분석하자니...


(모르겠다)

그래서 일단 내가 사용하던 placeholder.com에 접속해서 나와 비슷한 이슈가 있는지 찾아보려고 했는데...

!!!!!!!!



문제는 cypress의 proxy 설정

cypress는 테스팅을 위해 자체적으로 프록시해서 요청하도록 되어있는 것 같았다.
그래서 cypress를 켠 브라우저에서 다른 사이트를 접속하면 이런것도 확인된다.


내가 사용하던 placeholder.com이라는 사이트가 이러한 환경에서의 요청을 비정상적인 접근으로 판단하고 애초에 차단을 했던 것이다.


해결!

이제 문제가 되는 걸 알았으니 이걸 변경만 해주면 된다.
내가 placeholder로 이 사이트를 썼던 이유는 아래처럼 이미지 크기가 이미지 내에 텍스트로 보여져서였다.

그래서 이거랑 비슷한 사이트 중 요청이 차단되지 않는 사이트를 찾아냈다.

https://dummyimage.com/

이제 mock apiresponse값 내의 링크를 이걸로 바꿔주면 잘 작동이 된다!
오예~ 알고보면 나는 코딩천재?


응 아니야

잠깐잠깐잠간갖잠가낙자짬간잠ㄴ간!!

여기까지 읽고 닫으려고 했던 사람은 조금만 더 읽어보자.
뭔가 이상한 점이 없는가?

현재 테스트가 격리되어 있지 않고 어디엔가 의존하고 있는 모습이다.
무슨말인지 모르겠으면 한번 다시 같이 생각해보자.



잘못된 테스트

우리가 테스트 코드를 작성하고 테스트를 할때는 몇가지 꼭 지켜야 하는 점이 있다.
그 중 하나는 바로 테스트가 잘 격리되어 있는지 이다.

지금 테스트는 placeholder.com 서버 혹은 dummyimage.com서버에 의존하고 있다.
해당 서버가 문제가 있을 시에 애꿎은 우리 테스트가 안돌아간다는 얘기다.


이건 뭐 Backend 의존성 없애려고 mock api 힘들게 만들었더니 또 다른 서버를 의존하는 아이러니한 상황이다.

때문에 이러한 테스트는 잘못된(=좋지않은) 테스트이다.
좋은 테스트로 바꾸기 위해 어떻게 해결해야 할 지 다시 생각해보자.



해결_찐막

해결에 앞서 현재 상황은 다음과 같다.

1. 클라이언트가 서버에 이미지 링크 요청 (request)
2. 서버가 클라이언트에 이미지 링크 전달 (response)
3. 클라이언트는 받은 링크값을 img 태그의 src에 넣고 렌더링


public 폴더에 이미지 직접 저장?

흠... 링크를 받아 src에 넣어주는 방식이니 public폴더에 테스트 이미지를 저장해두고 /image/testImage.png 이런식으로 내려주면 되지 않을까?

안될 방법은 아니다.
하지만 조금 더 생각해보니 아래와 같은 문제점이 있다.

  • build시 테스트 용 이미지도 같이 build 된다.
  • 테스트 용 이미지는 테스트 이외에 전혀 사용하지 않기 때문에 비효율적이다.



나의 해결법 - base64로 내리자!

(해당 해결 방법은 현재 환경에 적합하다고 생각한 것이며, 회바회팀바팀프바프입니다.)

img 태그의 src에는 링크 형식으로도 내릴 수 있지만, base 64로 인코딩 한 값을 내려도 정상적으로 확인 가능하다.

쉽게 말하자면 이미지 파일을 문자열 형태로 내린다고 보면 된다.

이 방법을 사용하면 이미지 파일을 따로 저장하지도 않고 mock api에서 자체적으로 내려줄 수 있으며, build에도 문제가 되지 않는다.


방법은 정말 간단하다.
나의 경우에는 이 사이트를 사용했다.

해당 사이트에 인코딩 하고 싶은 사진을 넣으면 친절하게 형식까지 맞춰서 값을 준다.

copy to clipboard를 누르고 복사된 값을 src에 넣어보면 잘 보이는 걸 확인할 수 있다.
(background-image 에 넣을거면 아래거를 복사하자)

결과


(짤 킹받네)


정리


테스트를 하는 것도 중요하지만 '잘' 하는 것도 정말 중요하다.
의미 없는 테스트를 작성하면 시간은 시간대로 쓰고 원했던 결과도 얻지 못한다.

이런 점들을 유의해서 올바른 테스트 코드를 짜보자!


  • cypress에서 placeholder.com 이미지 403이 뜨는 건 프록시 때문
  • 다른 사이트를 사용하면 해결 가능하지만, 원초적으로 그렇게 테스트 하면 안됨
  • 테스트를 격리시키고 의존성 없이 올바른 테스트를 진행하도록 노력해야함

+ 읽어주셔서 감사합니다.
+ 오타, 내용 지적, 피드백을 환영합니다. 많이 해주실 수록 제 성장의 밑거름이 됩니다.

다른글 보기

profile
반갑습니다. 프론트엔드 개발자 황주현 입니다. 🤗

0개의 댓글