[Basic] Frontend의 이해 - Testing your Apps

1.  Testing your Apps

• 단위 테스트 Unit test
  • 개별적인 구성 요소 또는 코드 단위를 테스트하는 소프트웨어 테스트 유형
  • 특정 함수, 메서드 또는 클래스에 대해 테스트 케이스를 작성하고 실행하는 것을 포함
  • 작은 독립적인 코드 단위의 동작과 정확성을 검증하는 것이 목적
  • 버그를 식별하고 코드 신뢰성을 보장하며 코드 유지보수와 리팩토링을 용이하게 합니다.
• 통합 테스트 Integration test
  • 개별적으로 테스트한 단위들이 함께 작동할 때의 상호 작용과 통합을 검증하는 소프트웨어 테스트 유형
  • 시스템의 여러 구성 요소를 통합하고, 그들 간의 상호 작용과 데이터 흐름을 확인
  • 전체적인 시스템 동작을 테스트
  • 서로 다른 모듈 또는 시스템 간의 통신, 데이터 정합성, 인터페이스 문제 등을 탐지하고 해결하는 데 사용
• 기능 테스트 Functional test
  • 소프트웨어의 기능적인 요구사항이 정확히 작동하는지를 확인하기 위한 테스트 유형
  • 사용자의 관점에서 시스템이 예상대로 동작하는지를 검증
  • 사용자 시나리오에 따라 소프트웨어의 기능을 테스트
  • 입력 값과 출력 값의 일치 여부를 확인하여 예상대로 동작하는지 확인
  • 시스템이 사용자 요구사항을 충족시키는지를 확인하는 데 사용

2. Write them with the tools

• Jest
  
  • JavaScript 애플리케이션을 위한 테스트 프레임워크
  • 주로 React, Vue, Angular 등과 함께 사용되며, 간결하고 강력한 기능을 제공
  • Jest는 단위 테스트와 통합 테스트를 모두 지원하며, 테스트 러너, 어설션 라이브러리, mocking 등의 기능을 내장하고 있어 사용자 친화적
  • 자동 모의(Mock)를 지원하여 다른 모듈과의 상호작용 시뮬레이션 가능
• react-testing-library
  • React 컴포넌트를 테스트하기 위한 라이브러리
  • 사용자의 관점에서 UI 컴포넌트의 동작을 테스트하기에 적합
  • 실제 유저가 사용하는 것과 유사한 방식으로 테스트 작성 가능
  • DOM 테스팅, 이벤트 시뮬레이션, 스냅샷 테스팅 등의 기능을 제공
• Cypress
  • 브라우저에서 실행되는 End-to-End (E2E) 테스트 프레임워크
  • 사용자 인터페이스와 애플리케이션의 전체적인 동작을 테스트하는 데 특화
  • 브라우저에서 동작하는 액션들을 직접 수행하고 확인 가능
  • 가독성이 높은 테스트 코드를 작성할 수 있도록 도와주며, 디버깅과 시간 여행(Time Travel) 기능 등을 제공
• Playwright
  • 크로스 브라우저 테스트 자동화를 위한 도구
  • Chrome, Firefox, Safari 등 다양한 브라우저를 지원하며, 웹 애플리케이션을 테스트하기 위해 브라우저를 제어하고 상호작용하는 기능을 제공
  • Playwright는 테스트 코드를 작성하기 쉽고 유지보수가 용이
  • 다양한 기기와 환경에서의 테스트 수행 가능
  • 멀티 브라우저 및 멀티 페이지 테스트, 네트워크 인터셉트 등의 기능을 제공