프론트앤드 테스트

프론트앤드에서의 테스트 의미

작성한 프로그램이 의도한대로 작동하는지 확인하기 위한 작업이다.

프론트엔드 특성상 직접 시도해서 확인할 수 있으나, 휴먼 에러를 방지하기 위해 코드로 작성하여 확인한다.

 

테스트 종류

1. 정적 테스트

- Typescript, eslint

- 구문 오류와 타입 오류를 감지해 런타임 에러를 방지한다.

- 변수를 string 타입으로 지정하면 number 타입으로 접근할 때 에러를 발생시킨다.

 

2. 단위테스트

- jest, mocha, react-testing-library

- 하나의 함수, 메소드, 클래스, 모듈의 작동을 테스트한다.

- Input에 대해 올바른 output을 줄 수 있는지 확인한다.

 

3. 통합테스트

- react-testing-library, enzyme

- 여러개의 모듈, 컴포넌트의 상호작용을 테스트한다.

- api 통신으로 get한 데이터를 컴포넌트에 적절하게 랜더링 하는지 등 비즈니스 로직을 확인한다.

 

4. E2E

- cypress, puppeteer

- 사용자의 데이터 입력 등 경험을 예상하여 테스트한다.

- 장바구니에 담고 마이페이지에서 확인, 장바구니 항목을 삭제 등 사용자가 직접 사용하는 방식으로 확인한다.

 

 

 

 

Configuring Jest · Jest

@testing-library/react