WIL 8주차 - 프론트엔드 테스트 코드

이번 8주차 발제는 프론트엔드 테스트 코드와 관련된 내용이었다. 단위 테스트, 통합 테스트, E2E 테스트를 각각 어떤 상황에서 사용하는지 알아보는 시간이었다.

사실 회사에서는 그동안 테스트 코드를 거의 작성하지 않았기 때문에, 이번 발제가 도움이 많이 됐다. 요즘은 AI를 활용하면 테스트 코드 자체는 예전보다 훨씬 쉽게 작성할 수 있다. 그래서 오히려 어떤 동작을 테스트할지, 어떤 케이스를 선택할지, 어느 테스트 레벨에서 검증할지를 설계하는 일이 더 중요해진 시점이 아닐까 생각하게 됐다.

이번 발제와 과제를 진행하면서 특히 기억에 남은 점은 세 가지였다.

1. 세 가지 테스트 방법을 코드의 성격에 맞게 적재적소에 사용해야 한다는
   점
2. 테스트 케이스를 AI에게 100% 맡기지 말고, 내가 직접 검토하고 선택해야
   한다는 점
3. 테스트 코드를 작성하는 것만큼, 테스트를 안정적으로 실행할 수 있는 환
   경을 만드는 것도 중요하다는 점

특히 3번을 가장 많이 체감했다. 이번 과제에서는 E2E 환경을 구성하면서 Next.js의 서버 환경과 브라우저 환경이 같은 테스트 조건을 보도록 만드는데 많은 시간을 썼다. 처음에는 단순히 API 응답만 mock하면 된다고 생각했지만, App Router에서는 서버 컴포넌트의 prefetch와 클라이언트 fetch가 서로 다른 위치에서 실행된다는 점 때문에 생각보다 고려할 것이 많았다.

이 과정에서 page.route(), msw/node, 별도 Mock API Server 같은 방법을 비교해보았고, App Router 환경에서 E2E 테스트를 안정적으로 만들기 위해 어떤 경계를 잡아야 하는지도 배울 수 있었다. 테스트 코드 자체를 작성하는 것보다, 그 테스트가 항상 같은 조건에서 실행될 수 있는 환경을 만드는 일이 더 중요할 수 있다는 점을 느낀 과제였다.