[코드숨 React] 4주차 주간회고

Facts (사실, 객관)

이번 에는 3주차 내용인 테스트와 4주차 내용인 리덕스를 함께 공부했다.
둘 다 이번에 처음 배워보는 내용이었다. 사실 너무 내용이 낯설어서 따라가기 벅찼다.
낯선 것에 겨우 하나 익숙해지면, 또 다시 처음 보는 새로운 것에 익숙해져야 했다.
사실 이번 한 주 동안, '낯선 것을 마주하는 내 태도'가 솔직히 되게 실망스러웠다.
내가 원하는 내 모습은 새로운 내용에 흥미를 느끼고 적극적으로 배우는 그런 모습인데,
계속되는 낯선 내용에 나는 점점 무기력해지고 의지력을 잃어갔다.😥 사실 다른 분들 PR을 보면서 되게 주눅들기도 했다.
그래도 내가 무기력해질 때 쯤 트레이너님이 리뷰 달아주신 내용 덕분에 '딱 이거만 고쳐볼까...' 하는 의지가 조금 생겼다.
비록 과제1 밖에 완성하지 못했지만 그래도 포기 안하고 하나라도 끝낸 나한테 칭찬도 쪼금 해주고 싶다.
채찍이 있으면 당근도 필요하니까...😶🥕
낯선 것에 대한 두려움을 없애고 싶다. 사실 이해하고 나면 생각보다 어렵지 않은 경우가 더 많은데...
앞으로 한참은 더 새로운 내용 계속 배울텐데
계속 이렇게 낯선 내용이 나올때마다 무서워하고 무기력해지는건 싫다 T.T

TDD
- Red → Green → Refactor
- 실패하는 테스트 코드 → 성공하도록 구현 → 리팩토링
- 사실 아직 좀 더 해봐야 알 것 같다...
높은 응집도 + 낮은 결합도 테스트 작성하기
- 테스트 실행 순서에 영향을 받지 않는 테스트
- 테스트끼리 서로 영향을 주지 않는 테스트
Describe - Context - It 패턴
- describe : 테스트 대상을 명시
- context : When describing a context, start its description with when, with or without.
- it : 테스트 대상의 행동 설명하기

왜 쓰는가?
- 상태 관리 로직을 기존 Todo App에서는 App에서 관리한다.
  - 이때 만약 input에서 입력이 발생하면...
    App에서 input을 변경하는 onChange 함수를 props로 Page에게,
    Page는 또다시 Input에게 전달해서 상태를 처리한다...😶
- 그러나 리덕스를 사용하면 상태값을 컴포넌트에 종속시키지 않고, 컴포넌트의 바깥에서 관리할 수 있게 된다.
  이를 reducer(state를 변경하는 함수)과 store(리덕스의 상태값을 갖는 객체)이 가능하게 한다.

이해하는데 엄청 오래 걸렸다... ˘︹˘
우선... mock이란?
- 번역 그대로 하면 'mock = 모조품'
  테스트 대역, 구현한 코드를 테스트하는데 필요한 것들을 잠시 대신해주는 요소
jest.mock('moduleName')
- 모듈 덩어리로 모킹 처리할 때 사용한다.
- 모듈 내에서 export하는 모든 것들에 대해 Mock 함수 기능을 사용할 수 있다.
mockImplementation
- useSelector.mockImplementation
  - 만약 리덕스의 state를 가져오고 싶을 때, 실제 useSelector는 이렇게 쓴다.
```
const { taskTitle } = useSelector((state) => state);
```
    이를 테스트 코드에서 내가 원하는 데이터로 가져오고 싶다면 이렇게 모킹하면 된다.
```
useSelector.mockImplementation((selector) => selector({
    taskTitle: 'task',
  }));
});
```
- useDispatch.mockImplementation
  - 미리 만들어 둔 액션 생성 함수를 useDispatch를 통해 발생시킨다.
```
const dispatch = useDispatch();
dispatch(addTask()); // 새로운 todo를 추가하는 액션 생성 함수
```
  - 이를 테스트 코드에서 사용하고 싶다면 이렇게 모킹하면 된다.
```
const dispatch = jest.fn();
useDispatch.mockImplementation(() => dispatch);

// 다음과 같이 테스트한다.
expect(dispatch).toBeCalledWith(addTask());
```
- 이해하는데 도움 많이 받은 곳🙇‍♀️
  - https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c

npm run test:unit -- --coverage
- 실행하면 coverage 폴더가 만들어지는데,
  여기에서 /coverage/lcov-report/index.html를 브라우저로 열어보면 어떤 코드가 테스트 되지 않고 있는지 자세하게 볼 수 있어서 편하다. :)

Runs a function before each of the tests in this file runs.
[1] 여러개의 테스트에 계속해서 반복되는 코드가 있다면 beforeEach 안에 넣기
[2] mocking 함수처럼 테스트끼리 상태가 공유되는 것들을 초기화하는 코드를 beforeEach안에 넣기
- 왜 정리해야 하는가?
  : mocking 함수들을 적절히 초기화해주지 않으면 다른 테스트에 영향을 주는 등 테스트가 의도치 않게 동작할 위험이 있다.