[23주차 1] 프론트엔드 테스트 코드 강의 chap3-1

joon/frontend-test-code/chap3.md

@@ -0,0 +1,48 @@
+# 단위 테스트 작성하기
+
+> **작성 및 유지보수 비용이 오히려 증가할 수 있으므로** 커버리지 100%를 꼭 목표로 할 필요는 없다!
+
+## 단위 테스트
+
+- 앱에서 테스트 가능한 단일 함수 또는 단일 컴포넌트와 같은 가장 작은 소프트웨어를 실행해 결과값이나 상태, 행위가 기대와 같은지와 같이 예상대로 동작하는지 확인하는 테스트
+- 상태나 로직 없이 UI만 그리는 컴포넌트는 검증하지 않는다.
+  - 스토리북과 같은 도구로 검증하자.
+- 상태에 따라 컴포넌트들이 조합되었을 때 어떻게 동작하는지까지 검증되어야 좋은 테스트이다.
+  - 예를 들어, 네비게이션 바 내부의 각각의 버튼들에 대한 테스트보다는 상태에 따라 모습이 변하는 네비게이션 바 자체에 대한 테스트가 더 효율적이고 정확할 수 있다.
+- 리액트 훅과 유틸 함수 또한 단위 테스트의 대상으로 적용하기 좋다.
+  - 일반적으로 결과값들이 정해져있기 때문인듯
+
+## 모듈 모킹
+
+> 유명 라이브러리들의 훅들을 검증해야 할까?
+
+- 단위 테스트에서 외부 모듈에 대한 검증은 완전히 분리하고, 모듈의 특정 기능을 제대로 호출하는지만 **“모킹(mocking)”**을 통해 검증
+
+### **모킹(Mocking)**
+
+- 실제와 동일한 동작을 하도록 만든 **모의 모듈 혹은 객체로** 실제 모듈 혹은 객체를 대체하는 것
+  - Ex) 모킹 서버에 특정 API 요청에 대한 응답값을 미리 지정해두고, 해당 API가 호출되었을때 실제 서버로 요청을 보내는 것이 아닌, 모킹 서버로 요청하여 응답값을 받음
+- vi.mock()을 사용해 특정 모듈을 모킹할 수 있다.
+
+### 장단점
+
+- 외부 모듈과 의존성을 제외한 필요한 부분만 검증이 가능
+- 실제 모듈과 완전히 동일한 모의 객체를 구현하는 것은 큰 비용
+- 모의 객체를 남용하는 것은 테스트 신뢰성을 낮춤
+
+### 모킹 초기화
+
+- 다른 테스트에서는 특정 모듈에 대한 모킹이 필요없다면?
+- 특정 테스트의 모킹 작업이 다른 테스트에 영향을 준다면?
+
+  → 테스트의 신뢰성을 떨어뜨릴 수 있다
+
+> 따라서, 테스트를 실행한 뒤에는 명시적으로 모킹 초기화를 하자!
+
+- 각 테스트의 독립성과 안정성을 보장하기 위해 teardown에서 모킹을 초기화하자
+- vitest의 resetAllMocks, clearAllMocks, restoreAllMocks를 활용해 초기화하자
+
+### 리액트 훅
+
+- 리액트 렌더링 메커니즘을 따른 단순 함수이기 때문에 독립적인 단위 테스트를 작성하기 적합함
+- React Testing Library의 renderHook API를 사용해 편하게 검증할 수 있음