✨TDD

• 코드 작성 전에 테스트 코드를 작성하고, 테스트에 통과하도록 코드를 작성하는 것
• 코드 작성 전에 실패하는 테스트를 먼저 실행하고, 코드 작성 후에 통과하는 테스트로 확인

✨RTL(React Testing Library)

• 내부 코드 구현을 테스트 보다는 사용자의 소프트웨어 사용 테스트를 권장 (기능 테스트 권장)
• 테스트 위한 가상 DOM 생성 및 상호 작용을 위한 유틸리티 제공
• DOM에서 요소 찾거나 클릭과 같은 상호작용 가능
• 브라우저 없이 테스트 가능

✨테스트 종류

유닛 테스트

• 함수나 별개의 React 컴포넌트코드의 한 유닛 혹은 단위를 테스트
• 다른 코드의 유닛과 상호 작용은 테스트 X
• 함수 단위 테스트
  • 함수가 너무 복잡해서 테스트하려는 모든 극단적인 경우에 대해 컴포넌트를 렌더링 할 필요가 없는 경우
  • 기능 테스트의 실패 원인을 확인하고 싶을 때도 유용
  • 기능 테스트는 동작이 변하지 않는 한 통과 → 실패 시 원인 찾기가 어려움
  • 기능 테스트를 구성하는 함수들을 단위 테스트 해둔다면 쉽게 원인 파악 가능

통합 테스트

• 여러 유닛이 함께 작동하는 방식(유닛 간의 상호 작용) 테스트

기능 테스트

• 소프트웨어의 특정 기능(동작) 테스트
• 코드가 아닌 동작 테스트
  • 데이터를 폼에 입력하고 제출 클릭 시 소프트웨어가 특정 데이터 세트로 바르게 작동하는 기능 확인
  • 입력란에 잘못된 데이터를 입력하면 빨갛게 변하는지 테스트

인수(Acceptance) / End to End(E2E) 테스트

• 실제 브라우저, 애플리케이션이 연결된 서버 필요
• 보통 Cypress, Selenium 필요
• RTL을 위해 설계된 테스트는 아님

✨유닛 테스트 vs 기능 테스트

유닛 테스트

• 테스트 최대한 격리
• 함수나 컴포넌트가 의존하는 다른 함수가 있으면 실제 버전 말고 테스트 버전 사용
• 문제 발생 시 해당 유닛이 원인
• 사용자가 소프트웨어와 상호 작용을 실패해도 통과할 수 있음
• 리팩토링 후 동작이 동일해도 테스트 실패할 수 있음
  이유 : 리팩토링은 코드 동작은 그대로인데 작성 방식을 바꾸는 것, 보통 유닛테스트로 코드 작성 방식 테스트

기능 테스트

• 테스트하는 특정 동작, 유저 플로우와 연관된 모든 단위 포함
• 사용자가 소프트웨어와 상호 작용하는 방식과 밀접
• 문제 발생 시 사용자에게 문제가 발생할 가능성 높음
• 리팩토링 후 동작이 동일하다면 테스트 통과(테스트 견고)
• 어떤 부분의 코드가 테스트 실패의 원인인지 파악하기 어려움