FEConf Korea - [A5] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다
영상에서 코딩 코드 GitHub - Go
리액트 관심사의 분리
리액트의 관심사때문에 리덕스를 쓴다
리액트의 관심사는? 상태 반영
상태반영:어떤 상태가 리액트 컴포넌트에 전달이 된다면
그 컴포넌트에 전달된 상태를 바탕으로 UI를 그리게 된다
-그렇기때문에 리액트는 상태관리에는 관심이 없음
-많아지면 코드가 복잡해지기때문에 관심사를 쪼개서 분류해주어야함(서로 의존성이 생기지 않아서 Test를 잘 작성할 수 있어 TDD가 원활)
Component
Container Component : 리덕스에서 상태를 가져와서 하위 컴포넌트(Presentational Components)에게 전달
Presentational Components : 그리는 걸 담당
TDD
테스트 주도 개발
TDD를 하면 작은 부분을 고치기 쉽고 설계개선이 쉬움
요구사항을 명확하게 하는 습관을 가질 수 있다.(원하는 걸 자세하게 알고 어떻게 쓰이는지 알아야 TDD작성이 가능하기 때문)
필요조건은 좋은 설계이다.
BDD
test를 짤 때 행위 주도적으로 생각하기 위해 제시된 방법론
상황에 따라 다르게 행동(있을때는 ~한다, 없을때는 ~한다 )
descrie - context - it
(context 사용시 jest context plugin을 의존성 설치해야함)
[라이브러리]
Jest
테스팅 라이브러리
npm test 를 실행하면 프로젝트 내의 모든 테스트 파일을(test.js로 끝나거나 __test__디렉터리 안에 있는 파일들) 찾아서 테스트를 실행해준다. (npx jest --watchAll..)
Redux
상태 관리 라이브러리
(Action,reducer,Store,Dispatch,Selector)