프론트엔드 TDD 제대로 하기

junhyeong·2022년 11월 18일
0

이번에 레벨테스트를 하면서 진도를 나가지못하게 한 주범 '테스트 코드'

백엔드는 무난하게 테스트 코드를 작성 했는데 프론트엔드는 아직 어려웠다.

실제 코드는 작동하는데 테스트 코드는 작동하지 않아 못넘어가는 이상한 상황

그래서 계속 문제를 해결못하고 있다가 오늘 코딩인터뷰 시간을 이용해 노아님께 질문을 드렸다.

그 결과 내 테스트 코드의 구조에 문제가 있다는걸 알게되었고
문제를 해결한 뒤, 어떻게 테스트를 짜야하는지 배울 수 있었다.

TDD 제대로 하기

테스트는 사용설명서나 마찬가지라고 한다.

작성한 테스트 코드를 토대로 어떻게 사용하고 어떤게 들어가는지 알 수 있는 것이다.

따라서 테스트 코드만 봐도 어떻게 사용하는지 알 수 있도록 작성해야 한다.
(작성한 테스트 코드의 일부분이다)

예시로 이 테스트 코드를 보면 '+'(add count button)버튼을 누르면 handleClickAddCount라는 함수가 동작하는걸 알 수 있다.
(listens은 '잘 작동되는지', '잘 호출되는지'라는 의미로 쓰인다)

테스트 순서

페이지 테스트 -> 인터페이스 결정 -> 페이지 생성 -> 컴포넌트 분리 -> 컴포넌트 테스트 -> 인터페이스 -> 코딩

코드 작성 순서는 테스트가 제일 먼저다.
이런식으로 먼저 테스트 코드에서 인터페이스를 결정하고 그걸 토대로 페이지를 만든다.

그리고 테스트를 작성하다가 해당 컴포넌트에서 하기 어려운 테스트가 생기면 컴포넌트를 분리해야하는 상황이라는 것인데 이때도 앞에 했던 방식을 이용해서 코드를 작성하면 된다.

이렇게 작성하다보면 결국엔 좋은 구조의 코드를 작성할 수 있다.
테스트 코드를 쉽게 작성하려고 노력하다보면 실제 프로그램의 작동에 사용되는 코드의 구조도 같이 좋아지는 것이다.


오늘 이 방법을 시도해본 결과, 처음에 인터페이스를 모두 결정하고 하려니 시간도 오래걸리고 어려웠다. 하지만 그 때만 오래걸릴뿐 나머지 테스트 코드는 오히려 쉽게 작성할 수 있었고 실제 코드를 작성하기도 편했다.

많이 사용하지 않았던 방법인만큼 어려운게 당연하니 많이 써서 익숙해지자

Action
과제 남은 부분 TDD를 제대로 이용해서 끝내기

profile
매일매일이 성장하는 하루가 될 수 있도록!

0개의 댓글