단위 테스트란 앱에서 테스트 가능한 가장 작은 소프트웨어를 실행해 예상대로 동작하는지 확인하는 테스트이다.
프론트엔드에서 가장 작은 소프트웨어는 단일 함수의 결괏값 또는 단일 컴포넌트의 상태나 행위가 될 수 있다.
단위 테스트의 대상
프론트엔드에서는 버튼, 텍스트 입력, 캐러셀, 아코디언 등 재사용이 가능한 요소들을
앱의 특성에 맞게 공통 컴포넌트로 만들어 사용한다. 아토믹 컴포넌트라고 부르기도 한다.
공통 컴포넌트는 다른 컴포넌트와의 상호작용보다는 해당 컴포넌트가 내부 비즈니스 로직을 기능 단위로 나눠 제대로 동작하는지 검증하기 좋고,
범용적으로 재사용되기 때문에 단위 테스트를 통해 안정성을 높여야 한다.
AAA 패턴
테스트 코드를 작성하는 패턴은 여러 가지가 있으나, 이곳에서는 AAA 패턴만 다룬다.
AAA의 각 의미는 다음과 같다.
Arragne: 테스트를 위한 환경 만들기(컴포넌트 렌더링)
Act: 테스트할 동작 시뮬레이션(클릭, 타이핑, 메소드 호출)
Assert: 기대한 결과대로 실행되는지 검증
단위 테스트를 작성할 때
상세한 테스트 디스크립션을 통해 가독성을 향상시켜야 한다.
내부 DOM 구조나 로직에 영향을 받지 않도록 테스팅 라이브러리 API를 통해 적절한 요소를 검증해야 한다.
컴포넌트의 최종 렌더링 결과물인 DOM 구조가 올바르게 변경되었는지 검증해야 한다.