이번 프로젝트에서 가져가고자 하는 것에서 테스트 코드를 견고하게 가져가려고 개인적으로 마음먹었다.
그래서 조금 시간이 남을때 test code 커버리지를 높이는 작업을 하고 있다.
또한, test파일을 컴포넌트와 가깝게 배치하는 작업도 하고있다.
심리적인 문제일수도 있겠지만 컴포넌트와 테스트코드가 멀어지니까, 기능이나 코드가 변경되었을때 test코드 수정을 까먹는 일이 많았기 떄문이다.
아무튼, 테스트 커버리지를 높이다가 1가지 깨달은게 있다.
테스트 커버리지를 높이려면 분기 커버리지도 높아야한다.
분기 커버리지가 뭐냐면, if else같은 조건문이 있을때 if도 실행하는 test code가 있어야하고, else부븐도 실행하는 test code가 있어야 분기 커버리지가 100%가 나온다.
근데, 컴포넌트의 Props로 많은 인자들이 Optional로 넘어온다고 생각했을때, 해당 인자가 undefined일때와 유효한 값이 넘어올때 2가지를 테스트해야하는 경우가 빈번해진다.
심지어 Prop drilling을 하고 있는데, 해당인자가 Optional이면...?
Prop drilling하고 있는 모든 컴포넌트에 대해 해당인자가 undefined 경우까지 테스트코드를 중복해서 짜야한다.
테스트 코드 작성 비용을 줄이기 위해서라도, 최대한 undefined가 될 수 있는 코드는 최상단 컴포넌트에서 가려내고, 하위 컴포넌트들은 유효한 인자를 받을 수 있도록 리팩터링하는 것이 중요한것 같다.
간단하게 atom수준의 컴포넌트들에 대해 테스트코드를 작성해보았다.
https://github.com/woowacourse-teams/2021-darass/commit/5bfb6786b8c48cc2825873b8facf402e626dc4ea
https://github.com/woowacourse-teams/2021-darass/commit/c554fafcbf3323ab4fddfa9453d0f46beca20da5
https://github.com/woowacourse-teams/2021-darass/commit/899c23063e4913b78b47c59def7e88eedccc5e6c
https://github.com/woowacourse-teams/2021-darass/commit/fc118fc5f536075f397d56fed7bfb6d46d34a2b1
https://github.com/woowacourse-teams/2021-darass/commit/63e3f89cd4dd6a3a29a469ca699c4fd9e3e787fb
'개발 > 개발 리포트' 카테고리의 다른 글
| 2021/10/03 : 규모가 큰 컴포넌트는 어떻게 테스트할것인가. (0) | 2021.10.04 |
|---|---|
| 2021/10/02 : 무엇이 테스터블한 컴포넌트일까 (0) | 2021.10.03 |
| 2021/09/30 : WebComponent를 사용해보았다. (0) | 2021.10.01 |
| 2021/09/29 : 댓글 알림에 websocket을 사용했다. (2) | 2021.09.30 |
| 2021/09/28 : webpack5의 기본 제공기능을 사용하자 (0) | 2021.09.29 |
