브라우저에서 제품을 만나는 첫 번째 지점
어떤 기능을 개발하는지 관계없이 개발자는 개발을 마치고 요구사항에 맞게 잘 동작 하는지 테스트를 해야한다. 테스트 코드를 작성해서 테스트하지 않더라도 직접 실행해보고 검증하는 과정은 꼭 필요하다.
프론트엔드 개발에 있어도 유저가 처음 확인하는 지점이기에 더욱 더 세심한 테스트가 필요하다.
테스트 종류
1. Static Test
정적테스트(Static Test):는 코드를 실행시키지 않고 테스트 하는 것
Type 에러나 Reference 에러와 같은 개발자의 실수로 인해 발생하는 에러를 미연에 방지할 수 있다.
-- EsLint를 활용하여 사용하지 않는 변수나 Typescript로 함수의 인자로 받는 파라미터 타입 검사가 포함된다.
2. Unit Test
단위 테스트는 각 모듈 즉 클래스나 컴포넌트 단위를 독립적으로 테스트하는 것을 뜻한다. 물론 독립적이지 않을 땐 의존성이 있는 코드와 함께 테스트 하는 Socialble 테스트와 테스트 더블로 대체하는 Solitary 테스트가 있다.
- Unit 테스트는 특정 컴포넌트이 정상적으로 렌더링 되는지
- Sociable 테스트는 자식 컴포넌트까지 렌더링 되는지
- Solitary 테스트는 자식 컴포넌트를 모킹해서 렌더링을 하는지
로 예시를 들 수 있다.
3. Integration Test
통합 테스트는 두 개 이상의 모듈이 합쳐진 상태를 테스트하는 것을 말한다. 모듈 간의 결합에서 발생하는 에러를 검증할 수 있으며, 단위테스트보다 비교적 넓은 범위에서 테스트하기 때문에 리팩토링에 쉽게 깨지지 않는 장점이 있다.
- broad test: 의존성이 있는 모든 모듈이 연결된 상태를 테스트
- narrow test: 연결된 모듈을 테스트 더블로 대체하여 테스트
프론트엔드에서 통합 테스트는 UI와 API 간의 상호작용이 올바르게 일어나는지, 또는 state에 따른 UI의 변경이 올바르게 동작하는지를 확인힌디. 그리하여 실제 API를 호출하여 broad test를 하거나 API client를 모킹(mocking) 하거나 가상 API 서버를 이용함으로써 narrow test를 수행할 수 있다.
4.E2E Test
E2E 테스트는 실제 사용자의 입장 및 환경에서 테스트하는 것
실제 브라우저를 실행해서 테스트하는 것을 말하고 커버리지가 높고 실제 상황에서 발생하는 에러를 검출할 수 있다.
실제 브라우저 위에서 작동하기에 Web API를 활용할 수 있고 테스트 코드가 내부 구조에 영향을 받지 않아 코드의 변경에도 비교적 테스트코드가 깨지지 않는 점이 있다.
하지만 브라우저 위에서 작동하기에 실행속도가 느리고 실행환경에서 생기는 네트워크 에러와 같은 실패로 신뢰하기 어려운 단점도 있다.
테스팅 툴
사진과 같이 현재는 Vitest,Jest이 제일 인기가 많음을 알 수 있다.
다음 차례에 Jest를 활용하여 테스트 코드를 짜보자
