# 테스트 코드

{% hint style="success" %}
테스트 코드를 작성하면, 테스트 가능한 구조로 코드를 작성하게 되기 때문에 코드가 더 간결하고 유연해지고, \
의존성이 줄어들어 유지보수성과 가독성이 자연스럽게 좋아짐
{% endhint %}

## 라이브러리의 테스트

> 라이브러리에 테스트 코드는 신뢰도와 유지보수성을 위한 필수 요소

* 한번 배포되면 다양한 환경에서 사용되기 때문에 **작은 버그 하나도 파급력이 큼**
* **버그 수정이 곧 브레이킹 체인지**가 될 수 있음
* 사용하는 입장에서는 변경 사항에 대응하거나, 버전을 변경 등, 번거롭고 신뢰도도 떨어지기 때문에 기피하게됨
* 라이브러리의 안정성을 보장하기 위해 테스트 코드를 작성하는것이 좋다.

### UI 컴포넌트 테스트 방식

> 테스트 방식을 선택할 때, **프로젝트의 요구사항**, **팀의 경험, 사용 도구, 기술 스택을 고려해서 가장 적합한 방식 선택**&#x20;

#### 단위 테스트

* 개별 컴포넌트에 기능이 잘 동작하는지 검증
* ex: 버튼 컴포넌트를 클릭했을 때 콜백 함수를 호출하는지

#### 스냅샷 테스트

* 컴포넌트 UI 출력이 예상되로 나타나는지 확인
* 현재 스냅샷과 이전 스냅샷을 비교
* 코드를 캡처하기 때문에 코드 구성을 쉽게 비교 가능하나,  px 단위의 변경, css 변경에 따른 스타일 변화를 감지하기 힘듬

#### 비주얼 회귀 테스트

* 컴포넌트의 실제 렌더링 결과와 이전 결과를 비교해서 UI 변경사항을 감지
* 디테일한 스타일 변경점을 파악하기 용이

#### 통합 테스트

* 여러 컴포넌트나 모듈이 함께 동작할 때, 상호작용이 의도대로 이루어지는지를 검증하는 테스트
  * 상호작용: 부모-자식 간 데이터 전달, 컨텍스트 공유 등
  * 전역 상태가 여러 컴포넌트 간에 공유될 때, 그 흐름이 의도대로 작동하는지 검증
* **서로 연결된 부분들이 통합된 상태**에서 정상적으로 작동하는지를 확인

#### 접근성 테스트

* 컴포넌트가 웹 접근성 가이드라인에 준수하는지 테스트

#### 성능 테스트

* 컴포넌트 렌더링 속도, 특정 인터렉션의 반응속도 측정
* React Profiler API 사용하여 컴포넌트 렌더링 속도 측정

#### 메뉴얼 테스트

* 실제 사용자 (QA 엔지니어)가 인터페이스를 실제 사용해보면서 문제점을 수동으로 찾는 방법

### 스토리북 테스트

