[아티클] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.

[hyunahOh]

출처

https://www.youtube.com/watch?v=L1dtkLeIz-M&t=36s

핵심

• 관심사의 분리
  • 개개의 요소가 자신의 관심부분에만 집중할 수 있도록하는 소프트웨어 원칙
  • 지키지 않으면 코드는 거대한 진흙덩어리가 됨

라이브코딩

1. 테스트 만들기

   

2. 수단과 방법을 가리지말고 테스트 통과하게끔 만들기

   

3. (더미)데이터를 넘겨주어서 해당 내용을 렌더링 하도록 테스트 생성

   

4. prop 데이터로 렌더링하게끔 컴포넌트 수정

   

리덕스 활용

5. 스테이트를 리덕스로 보내려면, useSelector를 조작해야함

6. 초기에 스토어가 초기화 되었는지 테스트 작성

BDD

7. 테스크가 없을 때의 화면도 추가

...

TDD 는 TDD 하나만으로 좋은설계가 나온다고 볼 순 없지만 약간의 지뢰탐지기 역할.

작은 덩어리의 똥이 치우기 쉽다.