테스트 코드
테스트 코드를 작성하면, 테스트 가능한 구조로 코드를 작성하게 되기 때문에 코드가 더 간결하고 유연해지고, 의존성이 줄어들어 유지보수성과 가독성이 자연스럽게 좋아짐
라이브러리의 테스트
라이브러리에 테스트 코드는 신뢰도와 유지보수성을 위한 필수 요소
한번 배포되면 다양한 환경에서 사용되기 때문에 작은 버그 하나도 파급력이 큼
버그 수정이 곧 브레이킹 체인지가 될 수 있음
사용하는 입장에서는 변경 사항에 대응하거나, 버전을 변경 등, 번거롭고 신뢰도도 떨어지기 때문에 기피하게됨
라이브러리의 안정성을 보장하기 위해 테스트 코드를 작성하는것이 좋다.
UI 컴포넌트 테스트 방식
테스트 방식을 선택할 때, 프로젝트의 요구사항, 팀의 경험, 사용 도구, 기술 스택을 고려해서 가장 적합한 방식 선택
단위 테스트
개별 컴포넌트에 기능이 잘 동작하는지 검증
ex: 버튼 컴포넌트를 클릭했을 때 콜백 함수를 호출하는지
스냅샷 테스트
컴포넌트 UI 출력이 예상되로 나타나는지 확인
현재 스냅샷과 이전 스냅샷을 비교
코드를 캡처하기 때문에 코드 구성을 쉽게 비교 가능하나, px 단위의 변경, css 변경에 따른 스타일 변화를 감지하기 힘듬
비주얼 회귀 테스트
컴포넌트의 실제 렌더링 결과와 이전 결과를 비교해서 UI 변경사항을 감지
디테일한 스타일 변경점을 파악하기 용이
통합 테스트
여러 컴포넌트나 모듈이 함께 동작할 때, 상호작용이 의도대로 이루어지는지를 검증하는 테스트
상호작용: 부모-자식 간 데이터 전달, 컨텍스트 공유 등
전역 상태가 여러 컴포넌트 간에 공유될 때, 그 흐름이 의도대로 작동하는지 검증
서로 연결된 부분들이 통합된 상태에서 정상적으로 작동하는지를 확인
접근성 테스트
컴포넌트가 웹 접근성 가이드라인에 준수하는지 테스트
성능 테스트
컴포넌트 렌더링 속도, 특정 인터렉션의 반응속도 측정
React Profiler API 사용하여 컴포넌트 렌더링 속도 측정
메뉴얼 테스트
실제 사용자 (QA 엔지니어)가 인터페이스를 실제 사용해보면서 문제점을 수동으로 찾는 방법
스토리북 테스트
Last updated