5.1 UI 컴포넌트 테스트 기초 지식

웹 프런트엔드의 주요 개발 대상은 UI 컴포넌트.

• 렌더링 + 복잡한 로직

5.1.1 MPA와 SPA의 차이점

• MPA(multi-page application): 여러 HTML 페이지와 HTTP 요청으로 만들어진 웹 어플리케이션
• SPA (single-page application): 한 개의 HTML 페이지에서 개발하는 웹 어플리케이션
  • 웹 서버가 응답으로 보낸 최초의 HTML 페이지를 사용자 입력에 따라 부분적으로 HTML을 변경한다.
    • 변경 주요 대상이 되는 단위 UI 컴포넌트이다.
  • 사용자 입력에 따라 필요한 최소한의 데이터만 취득해 화면을 갱신한다.
    • 필요한 만큼만 데이터를 받기 때문에 응답 빠르고, 리소스 부담 줄임

5.1.2 UI 컴포넌트 테스트

대표적인 UI 컴포넌트 기능

• 데이터를 렌더링하는 기능
• 사용자의 입력을 전달하는 기능
• 웹 API와 연동하는 기능
• 데이터를 동적으로 변경하는 기능

이 기능들은 테스트 프레임워크와 라이브러리를 사용해서 ‘의도한 대로 작동하고 있는가’와 ‘문제가 생긴 부분이 없는가’를 확인해야 한다.

5.1.3 웹 접근성 테스트

웹 접근성: 신체적, 정신적 특성에 따른 차이 없이 정보에 접근할 수 있는 정도.

5.2 라이브러리 설치

• jest-environment-jsdom
• @testing-library/react