From c11f809ce984e50aec11846f72a1e87fe52472f8 Mon Sep 17 00:00:00 2001 From: hjy0951 Date: Mon, 15 Jul 2024 00:13:35 +0900 Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A1=A0=ED=8A=B8=EC=97=94=EB=93=9C?= =?UTF-8?q?=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EA=B0=95?= =?UTF-8?q?=EC=9D=98=20chap3=20=EC=9D=B4=EB=A1=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- joon/frontend-test-code/chap3.md | 48 ++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 joon/frontend-test-code/chap3.md diff --git a/joon/frontend-test-code/chap3.md b/joon/frontend-test-code/chap3.md new file mode 100644 index 0000000..ccc2700 --- /dev/null +++ b/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를 사용해 편하게 검증할 수 있음