201011 Dev 로그
October 11, 2020
코드 숨을 진행하면서 로그를 작성합니다.1. 한 일
- jest 코드 문서 튜토리얼 읽기
- jest-dom의 Readme 읽기
- testing-library/react 공식 문서 읽기
- To-do 테스트 작성 하기
2. 배운점
given - when - then과describe - context - it구조로 테스트 코드 작성jest,jest-dom,testing-library에 대한 전체적인 개념 이해- 하나의 테스트 코드에서 되도록 하나의 테스팅만 진행
- 컴포넌트를 작성할 때, 하위 컴포넌트는 디자인 테스팅, 함수 호출 및 props의 값 확인에 대해서만 진행, 반면 상위 컴포넌트에서 전체적인 동작에 대한 테스팅을 진행
- 기본 값일 때의 테스트(디자인, 함수호출)은 context 없이 테스트 코드 작성
- cleanup의 경우에는 자동적으로 호출됨. (description에서 render 호출 시에는 cleanup이 호출되지 않음)
- 테스트 코드 설명을 적을 때, 대상의 중점으로 작성
- 간단한 구조일 때, 쿼리로 대상을 찾기 않고, container를 이용해서 작성.
- mock 함수 작성시 clearAllMocks 함수 선언
- map 함수는 콜백함수에 대한 반환값을 배열로 출력되기 때문에 side effect가 생길 수 있음. 그렇기 때문에 반환값이 없는 반복문은 forEach 함수 사용.
- jsx가 한줄일 때, 소괄호 사용하지 않기.
- object destruction으로 코드 간단하기 작성.
3. 느낀 점 & 자기 선언
그 동안 주변에서 듣기만 했던 TDD를 직접해 보았다. 처음에는 jest, jest-dom, testing-library에 대해서 대락적인 구조 파악에 시간을 많이 썼던 것 같다. 하지만 해당 라이브러리에 대해서 대략적으로 이해해도 테스트 코드를 작성하는 건 어려웠다. 실제로 작성해보니 해당 라이브러리에 대한 이해도 중요하지만 각 Component의 필요한 테스트 코드가 무엇인지 고민해야 되고, 어떤 구조로 테스트 코드를 작성하는 게 좋은 지에 대해서 많은 고민이 필요했다.
그래도 멘토님의 수많은 피드백으로 대략적인 테스트 코드의 작성해서 어느 정도 감은 잡은 것 같다. 내 나름의 테스트 작성 방법에 대해서 적어보자면 아래와 같다.
1. 기본적으로 초기에 나타나는 디자인에 대한 테스트 코드를 작성한다.
2. props을 상태값을 전달 받아 사용하는 컴포넌트의 경우에는 given으로 props 값을 주어서 props에 대한 테스트 코드를 작성한다.
3. props으로 함수를 전달 받은 컴포넌트의 경우에는 mock 함수를 이용해 함수가 호출되는 지에 대한 테스트 코드를 작성한다.
4. state와 handle 함수가 정의 되어 있는 상위 컴포넌트에는 실제 앱의 동작에 대한 테스트 코드를 작성한다.이게 틀릴 수도 있고, 맞을 수도 있지만 이 정도의 감을 잡은 것도 큰 발전이라고 생각한다.
하지만 아직도 test 라이브러리에 대한 코드를 작성하는 데, 미숙한 부분이 존재한다. 좀 더 자세히 공부해봐야겠다.
또한 이번에 테스트 코드를 작성하면서 왜 테스트코드를 작성하는가?에 대해서 생각해보았다. 원래는 단지 테스트 코드를 작성하면서 오류를 줄이기 위해서 작성하는 것이라 생각했는데, 그것 이외에도 테스트를 미리 작성하면서 자신이 작성하는 제품이 어떻게 작동하는 지에 대해서 먼저 고민하면서 내가 구현할 기능을 좀 더 명확히 이해하는 과정을 겪은 것 같다. 그러면서 좀 더 사용자 중점으로 코드를 작성하는 장점을 가지는 것 같다. 직접 테스트 코드를 작성하니 TDD의 필요성을 직접 깨달은 것 같다.
