소프트웨어 테스트란?
- 개발자 입장에서 바라본 테스트
- 의도한 대로 정상동작하는지 검사하는 것
프론트엔드 테스트 수행하기: 테스트 케이스기반 테스트
QA(Quality Assurance, 품질보증):
제품 품질을 보증하기 위한 전반적인 프로세스와 활동. 테스팅은 QA의 중요한 부분이지만 QA는 이보다 더 광범위한 개념
만약 시나리오 테스트를 마치면 끝이날까? No
- 기능이 잘 되지 않는지 세부적으로 문제가 되는 지점을 찾기 어려움
- 테스트 시간적 비용 고려, 리소스 소비가 크다
그럼, 조금더 작은 단위의 기능을 테스트 해보자
조금 더 세부적인 테스트 작성하기 : 로직 하나 하나의 정삭적인 동작 테스트
예) 회원등록 페이지의 이메일 입력 관련
- 아주 세부적인 테스트로 갈 수록 문제가 생겼을 때, 어떤 문제인지 발견/추적하기 쉬움
그럼 작은 테스트가 장땡? ..... 아니다. 테스트를 작성할게 많다!
[테스트 종류]
1. 가장 유저사이드에 가까운 테스트: E2E테스트(엔드투엔드, 시스템테스트, 전체서비스 테스트)
- 테스트 케이스가 몇개 없어도 여러가지 기능들을 커버할 수 있다
- 실제 유저의 동작에 기반해서 모든 인프라까지도 테스트 할 수 있다
프론트엔드 쪽에서,
화면에서 시작해서 서버에 가서 백엔드 디비도 찌르고 여러 동작을 하는 인프라 아키텍처로부터 오는 기능들을 테스트
- E2E자동화 툴 : cypress / puppeteer / playwright
- 테스트 할라면 브라우저에서 실행을 해야하는데 굳이 디스플레이가 필요하진 않기때문에,
- 헤드리스 브라우저(실제 디스플레이 안하고 코드레벨(노드js)에서만 돌아가는 브라우저)의 백그라운드에서 자동으로 테스트가 진행
2. 통합테스트: 여러 모듈이 엮인 테스트
- 작은 컴포넌트 레벨의 테스트지만 최소 단위는 아닌 것들에 대한 테스트
- 브라우저를 실행해서 렌더링 하기도 하고, (더 많이 사용하는 방법) node.js 인스턴스 상에서 react.render()해서 정상동작하는지 확인하기도 하다.
- 노드JS 상에서 리액트.렌더 -> 어떤 요소를 찾아서 -> 그것을 클릭했을 때 원하는 정상동작이 이루어졌는가.
=> 컴포넌트 하나하나의 동작을 테스트한다
디자인시스템이란:
- 제품이나 서비스의 디자인과 개발을 일관되고 효율적으로 만들기 위한 표준화된 시각적 요소, 컴포넌트, 패턴의 집합
- 색상, 타이포그래피, 아이콘, 버튼, 폼 등의 UI 요소와 이들의 사용 지침, 그리고 이를 구현한 재사용 가능한 코드 컴포넌트가 포함
- 디자인 시스템은 일관된 사용자 경험을 제공하고, 개발 효율성을 높이며, 팀원 간의 협업을 개선하는 데 도움을 준다
통합테스트는:
여러개 컴포넌트가 있어서 컴포넌트에 대한 동작이 테스트 되어야 할 때,
예) 서비스에서 굉장히 중요한 영역, 장애가 나면안되는 영역에서 ( => 결제, 장바구니) 부가적인 장치로 통합테스트가 사용된다.
cf. E2E테스트에는 디자인시스템이 없다. E2E 테스트는 전체 시스템의 동작을 테스트하며, 이는 디자인 시스템을 포함한 모든 컴포넌트의 통합된 동작을 검증한다.
3. 유닛테스트: 가장 작은 단위에 대한 테스트
- 가장 브로드하다
- 각 기능하나하나에 대한 테스트다
- 코어컴포넌트를 개발할 때(예를들어, 같은 팀원 혹은 팀원으로부터 인수인계를 받아서 추가적으로 유틸리티 기능을 개발하거나 기능을 확장할 때 등), 기존에 지원되었던 다른 컴포넌트의 기능을 망가트릴 수 있다.
- 이런 상황에서 유닛테스트를 통해서, 어떤 코드를 어떻게 건드렸을 때 발생할 수 있는 문제를 추적하기 용이하다. 즉, 코드를 변경하면서 예상하지 못했던 사이드이펙트를 발견하기 쉽다.
- 유닛테스트 툴: jest
여기에서 E2E테스트와 다른점은?
- E2E테스트는, 개발이 끝나야 할 수 있다.
- 구현을 다 하고 테스트를 돌려봐야 잘 동작하는지 알 수 있다. 즉, 전체적인 서비스의 테스트를 하기 전에 각 유닛들이 정상동작하는지 검사하는 테스트이다.
'2024 Dev Camp🔥' 카테고리의 다른 글
| 프론트엔드 서비스 기획과 애자일 방법론(w.홍석희강사님) (0) | 2024.10.04 |
|---|
