테스트 과정에 대한 설명
테스트에 대한 구체적인 설명을 담은 wiki입니다. 보리쌀에서 사용한 테스팅 라이브러리는 jest이고 jest 실행을 위해 사용한 라이브러리들은 아래와 같습니다.
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/user-event
- jest
- jest-environment-jsdom
- msw
일단 보리쌀 프로젝트에서 주축으로 진행된 테스트는 크게 3가지가 있습니다.
- 기능 테스트
- 스냅샷 테스트
- api 테스트
하나하나 차근히 설명해보도록 하겠습니다.
컴포넌트의 기능적인 면을 테스트합니다. 클릭 이벤트, input입력과 같은 이벤트 수행, 다이얼로그 출력과 같은 작업이 되겠죠. 기능에 대한 다양한 경우를 두고, 그 경우가 잘 동작하는지, 아니면 의도한대로 실패할지를 테스트합니다.
대표적인 코드를 하나 가져와볼게요. PassWordChangeDialog입니다. 비밀번호 변경시에 생각해볼 수 있는 테스트 케이스에 대한 테스트 코드를 아래와 같이 작성했습니다.
위와 같이, "동일한 비밀번호를 입력했을 경우", "비밀번호 확인값이 다를 경우", "비밀번호 변경이 성공했을 경우"를 input과 click 이벤트를 달리 주면서 테스트합니다.
스냅샷 테스트는 비교적 간단하게 진행됩니다. 제가 원하는 형태로 화면이 렌더링이 됐는지 안 됐는지를 테스트 하기 위해 작성하는 테스트 코드입니다.
이렇게 간단하게 화면이 반영되었는지를 테스트하기도 하지만,
다음과 같이 mock api를 통해 가져온 데이터가 화면에 정상적으로 반영되는지를 확인하는 테스트 역시 진행합니다.
말 그대로 api를 테스트합니다. api 통신이 성공했을 경우, 실패했을 경우를 나눠서 확인하는게 일반적입니다.
위에 테스트의 경우는 이미지를 업로드할때 api입니다. 이미지 업로드가 정상적으로 성공했다면 current.isSuccess값이 true이기에 테스트 성공입니다. 마찬가지 이미지 업로드가 실패했을 경우 역시 current.isError를 통해 테스트합니다. 이때 이미지 데이터는 FormData의 형태로 전송해야하므로 new FormData를 mutate에 넘깁니다.