김솔비 블로그
기술 블로그

[Part 8] 테스트가 깨지면 배포가 안 되게 막았다

4분 읽기시리즈 9/10

TL;DR

  • 로직 테스트(Vitest) 23개를 빌드 명령에 넣었다. 하나라도 실패하면 Vercel 배포가 멈춘다.
  • 화면 테스트(Playwright) 19개는 PC와 모바일로, GitHub Actions에서 푸시마다 돈다.
  • 환경변수가 없으면 예시 데이터로 도는 구조를 처음부터 만들어서, 운영 DB를 건드리지 않고 화면까지 테스트한다.

문제

혼자 만들면 리뷰해 줄 사람이 없다. 빠르게 커밋을 쌓으면서 "이걸 고쳤더니 저게 깨졌다"를 매번 손으로 확인할 수는 없었다. 동시에 테스트를 한다고 운영 데이터를 더럽히면 안 된다. 테스트 복사가 통계에 섞이면 TOP 10이 틀어진다.

선택지와 내 선택

결정버린 선택지이유
로직 테스트를 빌드에 포함테스트를 따로 돌림잊어버려도 배포 전에 반드시 돈다
화면 테스트는 예시 데이터로운영 DB로 테스트운영 데이터 오염 방지
테스트를 기능과 같이 넣음"테스트는 나중에"나중은 오지 않는다. 실제로 버그를 잡은 건 같이 넣은 테스트였다

로직 테스트: 빌드를 막는다

package.json의 빌드 명령 앞에 테스트를 붙였다.

json
{ "scripts": { "build": "vitest run && next build", "test": "vitest run", "test:e2e": "playwright test" } }

Vercel은 배포할 때 build를 실행한다. 테스트가 하나라도 실패하면 next build까지 가지 않고, 배포가 멈춘다. 깨진 코드가 운영에 나가지 않는다.

테스트하는 것은 23개로, 규칙이 복잡하고 틀리기 쉬운 곳들이다.

  • 검색
  • 본문에서 프롬프트 추출 (2편의 규칙)
  • 제목으로 영문 주소 만들기
  • 빈칸 제안 (MBTI, 이름, 성격…)
  • API 사용 한도 계산 (3편)
  • 자동 요약

화면 테스트: 예시 데이터로

화면 테스트는 실제 브라우저를 띄워 누르고 확인한다. 문제는 데이터다. 운영 DB로 돌리면 테스트 복사가 통계에 섞인다.

그래서 처음부터 Supabase 환경변수가 없으면 예시 데이터로 도는 구조로 만들었다. 화면 테스트는 이 환경변수 없이 돌린다. 그러면 사이트가 예시 데이터로 뜨고, 테스트는 그 위에서 돈다.

19개 테스트는 PC와 모바일 화면으로 이런 흐름을 확인한다.

  • 홈, 상세
  • 복사 (같은 접속에서 한 번만 세는지)
  • 빈칸 채우기
  • 검색
  • 이미지 크게 보기
  • 공지사항
  • 404
  • 관리자 바로 발행

테스트가 실제로 잡은 버그

  1. 가짜 404. 없는 페이지가 404가 아니라 200으로 응답했다. 로딩 화면이 스트리밍을 시작하면서 상태 코드를 먼저 200으로 확정한 탓이다. 사람 눈에는 404 화면이라 손으로 확인했으면 놓쳤을 버그다. (6편)
  2. 바로 발행 후 안내가 안 뜨던 문제. 발행하면 목록이 새로 그려지면서 카드가 먼저 사라져, 안내를 띄우는 effect가 실행되지 않았다. 서버 응답을 받는 즉시 안내를 띄우도록 고쳤다.
  3. 요약에 해시태그가 섞여 말투 변환이 안 되던 문제. 자동 요약 결과에 #태그가 섞이면 말투를 바꾸는 처리가 먹히지 않았다.

결과

  • 로직 테스트가 실패하면 배포가 멈추고, 화면 테스트는 푸시마다 돈다.
  • 화면 테스트는 운영 DB를 건드리지 않는다.

배운 점

  • 1인 개발에서 테스트는 리뷰어 대신이다. 특히 빌드에 넣어 두면 잊어버릴 수가 없다.
  • 예시 데이터 모드는 처음에 만들어야 싸다. 나중에 붙이려면 데이터를 읽는 모든 곳을 다시 봐야 한다.
  • "테스트는 나중에"가 아니라 기능과 같이 넣는 게 결국 빠르다. 가짜 404는 사람이 봐서는 찾기 어려운 종류였다.

프롬피드 개발기

프롬피드: promfeed.solfany.com