12/29 TIL | 쉼표 작업 일지 #14. 카테고리 페이지 완성 & Jest 이미지 파일 깨짐 현상.

🔙 이전 시리즈

12/28 TIL | 쉼표 작업 일지 #13. 카테고리 페이지 스타일링 & props로 넘겨받은 문자열 개행하는 방법!

---

작업 회고

1. 카테고리 페이지 완성

카테고리 페이지

어제 하던 작업을 마저 이어서 카드 레이아웃을 완성했다. 기존 디자인에서는 태그와 배지가 존재하지만 역시나 핵심 가치를 기준으로 생각했을 때 중요한 부분은 아니기에 이번 MVP 구현에서는 배제되었다. 그리하여 완성된 화면은 위와 같다.

2. Jest 이미지 파일 깨짐 현상

프로그램 카드 레이아웃에서의 사진이 우선 mock 파일로 png 파일을 import해서 사용하고 있는데, 브라우저에서는 잘 보이지만, Jest에서는 객체로 인식되어 src 속성이 계속 지원하지 않는 Symbol이라 인식해 테스트가 깨졌다.

그래서 루트 디렉터리에 __mocks__폴더를 만들고 그 안에 fileMock.js 추가하여 사진 파일은 test-file-stub을 바라보게 하였다. 기존에 설치해놨던 identity-obj-proxy 라이브러리로 해결이 될 줄 알았는데, 이건 내가 설정해놓은 해당 확장자를 읽을 수 있게 객체로 변환되게끔 도와주는 역할이었는지 img 태그의 src 속성에 들어가게 되는 타입까지는 커버를 못 쳐주는 느낌...?

무튼 내가 제대로 된 정보를 넣었을 거라는 믿음으로 이미지 파일은 모킹하는 것으로 결심했다.

---

오늘 목표는 원래 카테고리 페이지를 빨리 완성하고 프로그램 목록 조회 API를 만드려고 했는데, 생각보다 테스트에 발목을 잡혀 원했던 만큼 작업을 하지는 못했다.

ALL PASS!

하지만 Jest와 React Testing Library이 이제는 조금 익숙해졌는지 유닛 테스트가 깨지더라도 금방 금방 해결할 수 있게 되었다는 것에 오늘 작업은 꽤나 만족스럽다. 이전과 비교했을 때 이렇게 성장한 게 있을 때마다 보람을 느끼고, 테스트에 초록불이 뜰 때마다 힘이 난다! 그러니 더 열심히 해보자. 파이팅!💪