테스트 코드 파일의 적절한 위치

몇 년 전에 레거시 프론트엔드 코드를 새롭게 작성하는 프로젝트에서 비슷한 내용으로 팀원들과 함께 장단점을 논의한 적이 있었는데요. 결론부터 말씀드리자면 저희 같은 경우 __test__ 디렉토리에 몰아뒀던 컴포넌트 파일과 같은 디렉토리로 옮기기로 결정했었습니다. 여러가지 이유로 프로젝트를 진행하면서 팀원들이 그 결정에 대해서 만족했던 것으로 기억하고 있습니다. 첫째로 컴포넌트 파일과 테스트 파일이 같은 디렉토리에 두었더니 전반적인 유지보수가 쉬워졌습니다. 왜냐하면 대게 컴포넌트를 수정할 때 테스트 파일도 함께 수정하게 되고 Storybook을 사용하게 되면 스토리 파일도 수정해야되고, 간혹 복잡한 컴포넌트의 경우 유틸리티 파일도 있을 수 있고 뿐만 아니라 index.tsx와 같은 파일도 함께 수정해야되는데 이 관련된 모든 파일이 한 곳에서 관리할 수 있으니까요. 특히 리펙토링이 매우 용이했습니다. 두번째로 개발자 경험이 좋아지는 효과가 있었습니다. __test__ 디렉토리를 사용할 때는 컴포넌트 파일과 테스트 파일이 너무 멀리 떨어져있어서 개발자들이 코드 탐색기에서 계속해서 위 아래로 스크롤링을 하느라 정신이 없었습니다. 그런데 테스트 파일이 컴포넌트 파일 바로 옆으로 오니 그런 불편함이 자연스럽게 사라졌습니다. 뿐만 아니라 GitHub에서 코드 리뷰할 때도 컴포넌트 파일을 바로 전이나 다음에 테스트 파일이 나와서 코드 리뷰하는 사람이 매우 편해졌습니다. 셋째로 테스트 코드 내에 임포트(import) 구문이 깔끔해졌습니다. __test__ 디렉토리에 테스트 파일을 모아두었을 때는 `../../../src/cmponents/XxxComponet`와 같은 복잡한 상대 경로 때문에 테스트 파일에서 컴포넌트 불러오는 코드가 매우 지저분해지고 정확히 어떤 디렉토리인지 한 눈에 파악하기가 어려웠습니다. 하지만 테스트 파일을 컴포넌트 옆에 두었더니 `./`와 같은 간단한 상대 경로 때문에 테스트 코드가 깔끔해졌습니다. 마지막으로 이 것은 의도치 않았던 부분인데... 뜻밖에 코드 커버리지의 상승 효과가 있었습니다. 테스트 파일을 컴포넌트랑 같은 디렉토리에 뒀더니 테스트가 작성되지 않은 컴포넌트가 훨씬 눈에 잘 띄어서 팀 내 모범적인 개발자들은 자진해서 부족한 테스트를 작성하기 시작했습니다. 그 이후로 저는 개인 프로젝트에서도 프론트앤드 백앤드 가리지 않고 가급적 테스트 코드는 테스트하려는 코드와 최대한 가까이 두려고 하고 있습니다. 답변이 도움이 되었으면 좋겠습니다 :)

테스트 코드의 위치는 개발 팀의 선호나 프로젝트의 특성에 따라 다르게 결정될 수 있습니다. 여기서는 두 가지 일반적인 접근 방식에 대해 이야기해보겠습니다. 1. 별도의 테스트 디렉토리를 사용하는 방식: 이 접근 방식은 테스트 코드를 모두 한 곳에 모아서 관리하고자 할 때 유용합니다. 이렇게 하면 테스트 코드와 프로덕션 코드를 명확하게 분리할 수 있습니다. 그러나 이 방법의 단점은 테스트 코드를 찾기 위해 디렉토리를 오가며 찾아야 한다는 점입니다. 2. 테스트 코드를 해당하는 소스 코드와 같은 위치에 두는 방식: 이 접근 방식은 각 컴포넌트나 모듈의 테스트 코드를 해당 컴포넌트나 모듈과 같은 디렉토리에 두는 방식입니다. 이렇게 하면 테스트 코드를 더 쉽게 찾을 수 있고, 테스트 대상 코드와 테스트 코드 사이의 동기화를 더 쉽게 유지할 수 있습니다. 그러나 이 방법의 단점은 프로덕션 코드와 테스트 코드가 섞여 있어서, 어떤 파일이 테스트 코드인지, 어떤 파일이 프로덕션 코드인지 구분하기 어려울 수 있다는 점입니다. Jest를 사용하는 경우, Jest의 기본 설정은 각 파일에 대응하는 테스트 파일이 같은 디렉토리에 있거나 '__tests__' 디렉토리에 있을 것으로 예상합니다. 따라서 Jest 설정을 변경하지 않는 한 두 가지 방식 모두 사용할 수 있습니다. 결국 어떤 방식을 선택할지는 개발 팀의 선호나 프로젝트의 특성에 따라 달라집니다. 팀원들과 함께 어떤 방식이 가장 효과적일지에 대해 논의해 보시는 것이 좋습니다.