테스트 코드 모듈 관리는 어떻게 하는게 효율적일까요?

프로젝트에서 테스트 코드를 어디에 두어야 좋을지 궁금하시군요. 여러 프로젝트에서 다양한 방법으로 테스트 코드를 관리하면서 제가 느꼈던 장단점을 공유드리겠습니다. ``` src/ componnets/ Button.tsx Heading.tsx pages/ Login.tsx __test__/ componnets/ Button.test.tsx Heading.test.tsx pages/ Login.test.tsx ``` 우선 위과 같이 하나의 디렉토리에 모든 테스트 코드를 모아두는 방식은 예전에 프로젝트의 규모가 크지 않을 때 주로 사용되던 방식입니다. 프로덕션 코드로 부터 테스트 코드를 명확하게 분리할 수 있다는 장점이 있지만, 프로젝트의 규모가 커지고 `src` 디렉토리와 `__test__` 디렉토리 내에 폴더 구조가 깊어지고 복잡해짐에 따라서 테스트 코드를 찾는 게 점점 고통스러워진다는 단점이 있습니다. 하지만 요즘에는 Jest를 포함한 대부분의 테스트 러너(runner)가 Glob 패턴 매칭을 지원함에 따라서 프로덕션 코드와 테스트 코드를 굳이 꼭 같은 디렉토리에 둘 필요성이 적어졌어요. 빌드 도구도 좋아져서 테스트 코드가 같이 번들링(bundling)되거나 하는 문제도 거의 없고요. 그래서 저는 가급적 아래와 같이 테스트 코드와 테스트하려는 코드와 최대한 가까이 두시라고 추천드리고 싶습니다. ``` src/ componnets/ Button.tsx Button.test.tsx Heading.tsx Heading.test.tsx pages/ Login.tsx Login.test.tsx ``` 여기에는 여러가지 실용적인 이유가 있는데요. 첫째로, 컴포넌트 파일과 테스트 파일을 같은 디렉토리에 두면 전반적인 유지보수가 쉬워집니다. 왜냐하면 대게 컴포넌트를 수정할 때 테스트 파일도 함께 수정하게 되고 Storybook을 사용하게 되면 스토리 파일도 수정해야되고, 간혹 복잡한 컴포넌트의 경우 유틸리티 파일도 있을 수 있고 뿐만 아니라 index.tsx와 같은 파일도 함께 수정해야되는데 이 관련된 모든 파일이 한 곳에서 관리할 수 있으니까요. 특히 리펙토링이 매우 용이해집니다. 두 번째로 개발자 경험이 좋아지는 효과가 있습니다. 별도의 테스트 디렉토리를 사용할 때는 컴포넌트 파일과 테스트 파일이 너무 멀리 떨어져있어서 개발자들이 코드 탐색기에서 계속해서 위 아래로 스크롤링을 하느라 정신이 없습니다. 그런데 테스트 파일이 컴포넌트 파일 바로 옆으로 두면 그런 불편함이 자연스럽게 사라집니다. 뿐만 아니라 GitHub에서 코드 리뷰할 때도 컴포넌트 파일을 바로 전이나 다음에 테스트 파일이 나와서 코드 리뷰하는 사람도 편해집니다. 셋째로, 테스트 코드 내에 임포트(import) 구문이 깔끔해집니다. 별도의 테스트 디렉토리에 테스트 파일을 모아두었을 때는`../../../src/cmponents/XxxComponet`와 같은 복잡한 상대 경로 때문에 테스트 파일에서 컴포넌트 불러오는 코드가 매우 지저분해지고 정확히 어떤 디렉토리인지 한 눈에 파악하기가 어려워집니다. 하지만 테스트 파일을 컴포넌트 옆에 두면 `./`와 같은 간단한 상대 경로 때문에 테스트 코드가 깔끔해집니다. 마지막으로 코드 커버리지의 상승 효과가 기대할 수 있습니다. 테스트 파일을 컴포넌트랑 같은 디렉토리에 두면 테스트가 작성되지 않은 컴포넌트가 훨씬 눈에 잘 띄기 때문입니다. 아무래도 테스트가 없다는 것을 계속 상기시켜주기 때문에 팀 내 모범적인 개발자들이 자진해서 테스트를 작성할 확률이 높아지겠죠? 답변이 도움이 되었으면 좋겠습니다 :)

마지막에 말씀하신 것처럼 개인 선호도/팀 컨벤션 차이인 것 같아요. 저는 테스트들끼리 모아두는 것 보다 각 페이지/컴포넌트에서 관리하는 것을 선호하는 편입니다. 간단하게 예를 들어“로그인” 이라는 컴포넌트를 작성한다고 했을 때, 해당 기능과 관련된 파일들을 가까이 두고 같이 관리하는게 응집도를 높인다고 생각합니다. 하지만 언급하신 두 패턴에 장/단점이 있으니 고민하셔서 현재 프로젝트에 적합한 방향으로 진행하시면 될 것 같아요!