프론트엔드 단위 테스트에 하루종일 고통받다 (레벨 테스트 3일차 작업 회고)

 

오늘 구현하려 했던 목표는?

• 상품 목록 조회, 상품 상세 목록 조회 단위 테스트, 인수 테스트 코드 작성 마치고 통과시키기
  
  
• 선물하기 로직 구현을 위한 사전 준비로 로그인 개념 구현, 선물하기 구현 진행

 

프론트엔드 테스트 중 인수 테스트를 제외한 Component, Store에 대한 단위 테스트는 지난 14주차를 진행하면서 제대로 완성하지 못했었던 옥의 티였다. 일단 오전 시간 동안 상품 목록 조회, 상품 상세 목록 조회 부분의 동작은 로그인과 관련된 것을 제외하면 모두 동작하게 만들었지만, 단위 테스트 구현은 거의 되어있지 않았다.

 

사실 월요일에 단위 테스트를 위해 Mocking을 무엇을, 어떻게 하는 것이 좋을지 고민했지만 답이 잘 나오지 않아 미뤄두고 있었다. 결국 언젠가는 해야 한다면 지금 확실하게 하고 가는게 좋겠다는 생각이 들었고, 점심시간이 지난 후 동료와 프론트엔드에서의 테스트 코드는 무엇을 테스트하는 것을 목표로 해야 하는지 이야기를 나눴고, 다음과 같이 테스트의 목표와 Mocking할 대상을 정리해보았다.

 

• Component에서 검증해야 하는 것: Store에 저장된 상태를 불러오거나, Action을 일으키는 트리거 호출을 할 수 있는가?
  • Store의 상태를 Mocking하고, Mocking한 상태를 화면에 잘 나타내는지 테스트한다.
  • 이벤트 핸들러에서 호출하는 라이브러리의 함수를 Mocking해 이벤트 핸들러가 실행되었을 때 해당 함수가 호출되는지 테스트한다.
    
    
• Store에서 검증해야 하는 것: apiService의 메서드를 호출해 서버에 요청을 보내면 응답을 가져와 상태에 저장하는가? 상태를 변경하는 메서드를 호출하면 상태를 정상적으로 변경하는가?
  • apiService의 메서드를 Mocking하고, 정해진 요청을 보냈을 때 받아오는 응답을 상태에 저장하는지 테스트한다.
  • 상태 변경 메서드를 호출했을 때 상태가 의도하는 대로 변경되는지 테스트한다.
    
    
• 인수 테스트에서 검증해야 하는 것: 사용자가 애플리케이션의 핵심 가치에 맞게 애플리케이션을 사용할 수 있는가?
  • 요구사항으로 주어진 정상 케이스와 에러 케이스를 테스팅 툴을 이용해 테스트한다.

 

 

테스트해야 할 상황을 정리하면서 작성해야 할 것들을 정리하고 나니 타겟이 정해졌고, 각각에 대한 구현을 시작했다. 그리고 시작한 지 얼마 되지 않아 난관에 부딪혔다. 나를 가장 괴롭혔던 내용은 그것이 apiService이건, Store이건, 한 번의 Mocking으로는 하나의 정해진 내용만 반환할 수 있었지만, 문제는 여러가지 경우의 수를 테스트할 수 있어야 한다는 것이었다. 그래서 그 방법을 찾기 위해 노력했지만 쉽게 되지 않았다.

 

 

20221005

 

msw 서버 Mocking 라이브러리에서의 요청은 그래도 Request Parameter나 Path Variable에 따라 응답을 다르게 해줄 수 있는 방법을 알아냈지만, jest.mock()은 하나의 파일에서 각 테스트 케이스마다 Mocking을 서로 다르게 해줄 수 있는 방법을 찾았지만 번번히 실패했다. 최후의 방법으로 테스트 파일을 분리해서 Mocking하는 방식으로 결국에는 의도대로 해냈지만 불편함이 가시지 않았다.

 

텔레파시가 통했던 것인지 트레이너님께서 들어오셔서 하나의 파일에서 내 의도대로 구현하려 할 경우 일단은 예외적으로 Mocking되는 대상을 재할당해서 할 수도 있다고 이야기를 해주셨다. 트레이너님께서 알려주신 방법을 토대로 남은 예외 테스트 케이스들을 작성해볼 계획이다.

 

트레이너님이 질의응답 말미에 해주셨던 내용이 기억에 남는다.

 

'방법을 찾지 못했거나 이런 것도 못하면서 경쟁력이 없는 것 아니냐는 자책은 하지 않아도 된다. 해낼 수 있는 방법은 다양하고, 지금은 내가 해낼 수 있는 방법의 가짓수를 늘려가는 과정이다.'