레벨 테스트 작업 로그 #5 - 상품 상세 페이지 구현 (22.12.02 TIL)

어제 컴포넌트를 분리하고 단위테스트는 확인하지 않은 채 잠들었는데, 오늘 확인해보니 테스트가 (당연하게도) 다 깨져있는 걸 발견했다. 그래서 오전에는 분리된 컴포넌트별로 테스트 코드를 다시 작성하는 시간을 가졌다. 

그리고 상품 상세 페이지 구현에 들어갔다. ProductStore 에서 product 를 destructuring 으로 받아와서 백엔드와 연동된 데이터를 화면에 뿌려주는 코드를 작성했는데, 구매 수량에 들어와야 할 숫자도 보이지 않고, 상품 금액도 NaN 을 반환하는 것이었다. 

엉뚱한데에서 원인을 계속 찾다가, 결국 옆 자리 zzezze 한테 도움을 요청했는데 너무 어이없는데에서 실수를 발견했다. 구매수량인 quantity 와 총 상품 금액인 totalPrice 는 백엔드가 아니라 ProductStore 에서 관리하는 상태변수였는데 이걸 product.quantity, product.totalPrice 로 가져오고 있었던 것이다,,, productStore.quantity, productStore.totalPrice 로 고치고 나니까 정상적으로 데이터가 들어왔다.

그리고 그저께는 msw 로 api 모킹을 하는데 자꾸 Axios : Network Error 를 띄우길래 또 여러 곳에서 원인을 찾으려 노력했는데, 알고보니 test server 를 setup 해주는 파일에서 afterAll 이 아닌 beforeAll 로 작성해놓은 것을 발견했다. afterAll 로 고쳐주니 정상적으로 작동했다.

원래는 afterAll 이어야 함

평소 코드를 작성할 때 오류를 잡아주는 오타가 아닌 변수를 잘못 불러온다거나, 혹은 메서드를 잘못 쓰는 휴먼 에러를 가장 주의해야 할 것 같다. 정신 똑바로 차리자!!!!!