💻 React Testing Tutorial

📖 참고

• Jest Matchers 종류

📖 개념 정리 목차

• Section 1 - 소개
  • 리액트 기본 App.test.js 파일 분석
  • Jest 단언(assert)
  • Jest DOM
  • Jest
  • TDD
  • React Testing Library(RTL)
  • 유닛 테스트 vs 기능 테스트
  • 테스트 접근성

• Section 2 - Color Button
  • Color Button(1) - 첫 레드/그린 테스트
  • Color Button(2) - 기능(functional) 테스트(with. 클릭 이벤트)
  • Color Button(3) - 인수(Acceptance) 테스트
  • Color Button(4) - 버튼, 체크박스 초기 조건 테스트
  • Color Button(5) - 체크박스 기능 추가(퀴즈 풀이)
  • Color Button(6) - 라벨이 있는 체크박스 찾기
  • Color Button(7) - 비활성화된 버튼 회색으로 봐꾸기(퀴즈 풀이)
  • Color Button(8) - 함수 유닛(Unit)테스트
  • Color Button(9) - 스펙 변경을 통한 코드 수정
  • Color Button(10) - 유닛 테스트를 하는 경우(추가 설명)

• Section 3 - ESLint 설정
  • ESLint 설정

• Section 4 - Sundaes on Demand
  • Sundaes on Demand(1) - App 개요
  • Sundaes on Demand(2) - 스타일링 셋팅(react-bootstrap)
  • Sundaes on Demand(3) - SummaryForm 구조
  • Sundaes on Demand(4) - SummaryForm: 체크박스 활성화 버튼
  • Sundaes on Demand(5)
    • Popover Test
    • useEvent
    • screen query methods

• Section 5 - Mock Service Worker(MSW)로 서버 응답 시뮬레이션
  • MSW(1) - Mock Service Worker와 핸들러 소개
  • MSW(2) - MSW로 스쿱 옵션 테스트하기
  • MSW(3) - MSW Error 테스트
    • test.only/skip

• Section 6 - Provider에 래핑된 컴포넌트 테스트하기
  • Provider(1) - 텍스트 입력란 채우기: 소계 테스트
  • Provider(2) - 테스트 설정에 Context 추가하기
  • Provider(3) - Provider Wrapper(CustomRender) 적용
  • Provider(4) - update toppings subtotal
  • Provider(5) - 총계(Grand total)
  • Provider(6) - act(...), Unmounted Component 에러
  • Provider(7) - 기능 테스트는 무엇을 잡아야 하나?

• Section 7 - 최종 섹션: 주문 단계
  • 최종 섹션(1) - Happy Path Test
    • 디버깅 팁, 주요 테스트 에러와 해결책
  • 최종 섹션(2) - orderPhase 테스트 코드
  • 최종 섹션(3) - Jest Mock(모의) 함수