> For the complete documentation index, see [llms.txt](https://toothlessdev.gitbook.io/main/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://toothlessdev.gitbook.io/main/web-develop/testing/frontend-testing.md).

# Frontend Testing

## 📖 테스트 코드를 짜는 이유 ?

테스트 코드를 짜면

> 1. 사업 / 서비스의 신뢰도가 올라가고
> 2. 유지보수성이 올라가며 (기존 테스트코드를 활용해 리팩토링시에도 기능이 올바르게 동작하는지 확인할 수 있음)
> 3. 코드 품질이 향상되며 (테스트 작성이 힘들경우 해당코드 역할이 많으므로 분할)
> 4. 원활한 협업이 가능하다 (테스트 코드를 통해 어떤 기능을 제공하는지 확인)

와 같은 장점들이 있습니다

## 📖 다양한 테스트 방법

테스트는 크게 **정적분석, 단위테스트, 통합테스트, E2E 테스트** 3가지 종류가 있습니다

### ✏️ 정적 분석

**Typescript 나 ESLint 를 사용해, 모듈 내부 검증 뿐만 아니라**\
**인접 모듈을 연계해 사용할 때의 문제점도 검증합니다**

1. TypeScript : 타입 추론을 통해 런타임 작동을 예측합니다
2. ESLint : 부적절한 구문에 경고하여 버그를 사전에 탐지합니다

### ✏️ 단위 테스트

**한가지 모듈에 한정해, 해당 모듈이 제공하는 기능을 검증합니다**\
**모듈이 특정 입력값에 대해 기대되는 출력값을 반환하는지 테스트를 진행합니다**\
**주로 독립된 환경에서, 엣지 케이스를 검증하는데 사용됩니다**

프론트엔드에서의 단위테스트는,

1. 함수 단위 테스트
2. UI 컴포넌트 단위 테스트 

로 나눌 수 있고 단위 테스트를 통해 신뢰할 수 있는 함수/컴포넌트를 조합합니다

> ❗️ 모듈과 컴포넌트의 차이

<table><thead><tr><th width="123">구분</th><th>모듈 (Module)</th><th>컴포넌트 (Component)</th></tr></thead><tbody><tr><td><strong>정의</strong></td><td>프로그램을 구성하는 독립적인 기능 단위로, 관련된 기능들을 그룹화한 코드 집합</td><td>시스템의 구조적 단위로, 특정 역할을 담당하는 독립적인 단위</td></tr><tr><td><strong>역할</strong></td><td>기능적인 재사용성, 코드 관리 및 유지보수 용이성 제공</td><td>시스템 내에서 특정 기능 또는 UI 부분을 담당하며, 다른 컴포넌트와 상호작용</td></tr><tr><td><strong>예</strong></td><td>하나의 <code>.js</code> 파일에 함수, 변수, 클래스 등을 포함</td><td>React에서 UI 요소로 사용되는 컴포넌트</td></tr><tr><td><strong>사용</strong></td><td>코드에서 가져오기(import) 하여 사용</td><td>부모 컴포넌트 내에서 다른 컴포넌트와 결합하여 사용</td></tr><tr><td><strong>초점</strong></td><td>코드 재사용과 관리 측면</td><td>시스템 구조와 역할 분담 측면</td></tr></tbody></table>

### ✏️ 통합 테스트

**여러 모듈을 연동한 기능을 테스트 합니다**\
**특히 외부 요인 (ex. 비동기 처리) 를 포함한 테스트를 말합니다**\
모듈 간의 의존성, 데이터 흐름, 상호작용 등을 테스트합니다

### ✏️ E2E 테스트

**애플리케이션의 전체 플로우를 사용자 관점에서 테스트합니다**\
**사용자 시나리오를 바탕으로 애플리케이션이 처음부터 끝까지 예상대로 동작하는지 확인합니다**\
전체 시스템의 구성요소들 간의 상호작용을 테스트 합니다

프론트엔드에서 E2E 테스트는

`Cypress` `Playwright` 등 Headless 브라우저를 사용해\
실제 애플리케이션에 가깝게 상황을 재현하여 테스트합니다

> ❗️Headless 브라우저 : GUI 가 없는 가상의 브라우저

### ✏️ 비교 및 장단점

<table><thead><tr><th width="109">구분</th><th>단위 테스트</th><th>통합 테스트</th><th>E2E 테스트</th></tr></thead><tbody><tr><td><strong>범위</strong></td><td>개별 UI 컴포넌트 또는 함수</td><td>프론트엔드 모듈(컴포넌트) 간의 상호작용 테스트</td><td>전체 애플리케이션의 사용자 플로우 테스트</td></tr><tr><td><strong>목적</strong></td><td>개별 컴포넌트 또는 함수가 올바르게 동작하는지 확인</td><td>여러 컴포넌트가 함께 작동할 때 예상대로 동작하는지 확인</td><td>사용자가 애플리케이션을 통해 실제로 수행하는 작업을 테스트</td></tr><tr><td><strong>의존성</strong></td><td>외부 의존성이 없거나 최소화됨</td><td>상태 관리, API 호출 등 프론트엔드 모듈 간 통합 테스트</td><td>백엔드 API, 데이터베이스, UI 등 전체 시스템 테스트</td></tr><tr><td><strong>속도</strong></td><td>매우 빠름</td><td>비교적 빠름</td><td>상대적으로 느림</td></tr><tr><td><strong>사용 도구</strong></td><td>Jest, React Testing Library 등</td><td>Jest, React Testing Library 등</td><td>Cypress, Playwright 등</td></tr><tr><td><strong>예시</strong></td><td><strong>버튼 컴포넌트가 클릭 시 올바른 이벤트 핸들러를 호출하는지 테스트</strong></td><td><strong>폼 입력 후 제출 시 버튼이 비활성화되는지 테스트</strong></td><td><strong>사용자가 로그인하고 대시보드에서 데이터를 확인하는 시나리오 테스트</strong></td></tr></tbody></table>