## 마스터 클래스

TDD라는 게 왜 나왔고, 이걸 이해하는 게 오래걸려요.
테스트 코드를 짜는 것도 공감하지 못한 채 내년에 어떤 회사에서 하고 있을 수도 있거든요.

### TDD
먼저, 테스트 코드를 먼저 짜요.
테스트 코드의 결과는 `pass` 아님 `fail` 이에요.
`fail` 이면 ~~테스트 코드~~가 아니라 (ㅋㅋㅋㅋ) 원래 코드를 수정해야해요.
`pass` 이면 리팩토링을 해요!


####### TEST-FIRST DEVELOPMENT #######
#1 (Re)write the test.
#2 Check if the test fails.
#3 Write only enough code.


####### REFACTORING #######
#4 Check if all the tests succeed.
#5 Refactor some code.
#5' Update the failing tests.
    Correct regrssions.


테스트 시나리오, 케이스를 잘 만들어야해. 그러려면 설계를 잘해야하고,
이 함수에서 무얼 구현해야하는지 디자인을 해야돼. 이 함수는 무슨 역할이야? 정의를 해야해. 
regrssions 은 회귀 테스트라고, 이전에 구현했던 게 잘 동작하는 지 확인하는것. 
이 사이클로 개발하는게 TDD 의 방법 중 하나.

1. 테스트를 (재)작성한다.
2. 실패하는것을 확인한다.
3. 테스트를 통과하는 코드를 작성한다. (ex - `return true`)
4. 테스트가 전부 통과하는지 확인한다.
5. 리팩토링
6. 이전 작성한 테스트가 작 작동하는지 확인한다.

## React에서 테스트
- 함수하나가 잘돌아가는지 테스트
- 스크롤, 트랜지션, 셋인터벌, 서버로 갔다오는 거 어떻게 테스트해??
- 이벤트: 클릭하면 레이어 스르륵
- UI 테스트는 사실 지옥. 아주 어렵다ㅠㅜ
- 가짜 데이터(Mock)을 사용
- 테스트 더블 공부

- 이벤트, 클릭을 했는데 레이어가 스르륵 나와. 어떻게 테스트해? UI 테스트는 사실 굉장히 지옥이고, 어려워요. 테스트 환경부터 1~2년 해봐야지 알지만, 비지니스 로직은 쉬운 편.
- 경험에 의한 꼼수같은 게 많다.
- fetch 등 Mock 을 사용해
- test 더블을 공부하세요..?

리액트는 컴포넌트 렌더링 잘되는 게 궁극적 목표라 다음과 같은 라이브러리들이 뜨기 시작했다.
모듈
- React testring Library
- jest-dom
- jest-fetch-mock

## react-testing-library 공부하기 좋은 예 👍🏻
https://velog.io/@velopert/react-testing-library

### 스냅샷 테스트 (JEST)
렌더링을 한 번했어. 캐쉬를 했어. 렌더링을 또 했어. 이전에 실행과 결과가 다를 수 있잖아. 그러면 결과가 fail이야.
결과에 차이가 있는 게 맞다면 옵션을 주면 알아서 다시 저장함,,
변경사항만 알려준다구...?

## 비동기 상황 테스트
테스트 시나리오 : button을 click하면 1번 API 응답 데이터가 노출된다.

//given
const title = "";

//when
fireEvent.click(getByText('loading data'));

//then
await waitFor

내 역할은 요청을 잘 보내는 것이지 올바른 응답은 서버의 역할
서버가 문제가 있는 데, 내가 pass fail 이면 안되니까
fetch Mock으로 ...

## 테스트 커버리지 도구
니가 짠 코드가 원래 코드를 얼마나 커버하고 있는지 리포트 해줌
CI travis에 연동시켜서 배포할 때마다 커버리지 리포트가 나오고 ㅋㅋㅋ

#### MOCK
mock을 사용하지 않을 수 있으면 사용하지 않는 게 좋다.
현실에서 테스트를 돌리고 기다려야하고, 테스트를 돌리는 시간이 길어지면 사용
(테스트가 지속 가능하려면 빨리 테스트되야하고 빠른 피드백)
테스트 안할 거면 목이라도 사용해라...
본질적인걸 테스트하면 사용 ㄴㄴ (네트워크 응답, 데이터베이스 연결)

전에 TDD 싫다고 말씀하시더니
오늘 추천하시는 크롱님..

#####
# 서 #
# 브 #
# 웨 #
# 이 #
#####