React Testing Library 연습2#1

학습 sources
-인프런 존안님 리액트 테스팅 강의
-Testing Library docs https://testing-library.com/docs/queries/bylabeltext/

실제 테스팅 Project

간단한 여행App 장바구니

overview

프로젝트 세팅

1.다운로드 dependencies
2.eslint, prettier 설정
3.설정 돌아가는지 test

폴더구조

---

테스트1

주문확인 테스트 코드 작성 flow
테스트 내용: 주문 확인 tick 했는지 안했는지

1. 테스트 코드 작성 & 테스트1

2. 코드 작성에 넣어야 하는 내용

input
type="checkbox"
checked ={checked} 상태
checked 상태관리 onChange((e)=> setChecked(e.target.checked)}
id => confirm-checkbox

label
htmlFor ="confirm-checkbox" ?? //이거는 id와 맞춰주기
"Have you checked yoru order?"

button
체크상태가 아니면 submit 금지
type = "submit"
disabled={!checked}

3. 테스트 코드를 보면서 코드 작성

좌 컴포넌트 & 우 테스트 코드 두고 작성 완료

4. 테스트2

=> 테스트 돌려본다.
FAIL!
Have yo ucheked your order 뒤에 ?가 없었다..

test passed!

끝