Next.js + Vitest 자동 테스트 프레임 구성 + AI 리포터 구축하기

아이디어가 떠오르게 된건 cursor 홍보영상이었나 cursor를 이용하여 테스트 코드 기반 자동 디버깅 영상을 본적이 있습니다. 물론 완벽할 순 없겠지만 테스트 코드를 구축하고 현재 사용중인 깃헙 코파일럿 + ai api를 이용해 간단한 프롬프트를 넣어준다면 간단한 css 작업같은 것들은 충분히 가능하다고 느꼈습니다.

이번에 마음먹고 Vitest 기반의 테스트 환경을 구축했습니다. 단순히 테스트만 돌리는 게 아니라, Gemini 2.5를 이용해 테스트가 실패하면 AI가 즉시 원인을 분석해 주는 자동화 리포터까지 연동해 보았습니다.

테스트코드 실행영상 링크 공유합니다.

https://www.youtube.com/watch?v=4PeCE1lwrOU

npm install -D vitest

기존 Next.js 프로젝트에서 @/components 같은 절대 경로를 사용하고 있었기 때문에 Vitest가 이해할 수 있도록 설정이 필요했습니다.

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import svgr from 'vite-plugin-svgr'
import path from 'path'
import AiReporter from './tests/reporters/AiReporter'

export default defineConfig({
  plugins: [svgr()],
  test: {
    // 커스텀 AI 리포터 추가 (뒤에서 설명!)
    reporters: ['default', new AiReporter()], 
    environment: 'jsdom',
    globals: true,
    css: true,
    exclude: ['**/node_modules/**', '**/.next/**'], // Next 빌드 파일 제외
  },
  resolve: {
    // Next.js tsconfig 매핑
    alias: [
      { find: '@', replacement: path.resolve(__dirname, './src') },
      { find: '@/components', replacement: path.resolve(__dirname, './src/components') },
      // ... 기타 alias
    ]
  },
})

Gemini 2.5 기반 AI Reporter 만들기
테스트가 실패했을 때, 로그만 보고 원인을 찾기가 귀찮을 때가 많습니다. 그래서 "실패하면 AI가 분석해서 해결책을 알려주는" 커스텀 리포터를 만들었습니다.

최신 Gemini 2.5 Flash 모델을 사용했고, Vitest의 Reporter 인터페이스를 구현했습니다.

AiReporter.ts 구현 로직
onFinished 훅에서 실패한(fail) 테스트 파일이 있는지 감지합니다.
실패 로그에서 HTML 덤프 등 노이즈를 제거하고 핵심 에러 메시지만 추출합니다.
Gemini API에 "이 에러의 원인이 뭐고, 코드를 어떻게 수정해야 해?" 라고 프롬프트를 보냅니다.
터미널에 AI의 분석 결과를 예쁘게 출력합니다.

// tests/reporters/AiReporter.ts (일부분)
export default class AiReporter implements Reporter {
    async onFinished(files: File[] = []) {
        const failedFiles = files.filter(file => file.result?.state === 'fail');
        if (failedFiles.length === 0) return;

        // 첫 번째 실패 로그를 AI에게 전달
        const firstError = this.getErrorLog(failedFiles[0]);
        console.log('\n🤖 AI가 첫 번째 실패 원인을 분석 중입니다...\n');
        
        const aiResponse = await this.askAI(firstError);
        console.log('\n📝 AI 분석 리포트:\n', aiResponse);
    }
    // ... API 호출 로직 ...
}

실제로 테스트 코드가 실패하면 바로 Gemini API로 해당 실패 부분을 질문하고 분석 리포트가 자동으로 나오게 됩니다. 그러면 유저는 분석 리포트를 이용해 수정하거나 분석 리포트를 그대로 Github Copilot 에 다시 질문합니다.

AI가 질문을 처리하는 특성상 한번에 하나의 이슈만 해결가능했고 테스트코드에서 두가지 이슈가 있어서 총 두번 질문을 했고 그 결과 테스트코드를 통과하는 모습을 볼수가 있습니다.

환경 구축 후 play.test.tsx 파일을 만들어 간단한 테스트를 돌려보며 정상 작동을 확인했습니다.

이후 newsLetterFrame.test.tsx 등 실제 컴포넌트 테스트로 확장해 나가며, 이메일 유효성 검사 등 핵심 비즈니스 로직을 검증했습니다.

이제 npm test 한 번이면 프로젝트의 건강 상태를 체크할 수 있게 되었습니다.

✅ 구축 완료 체크리스트

Vitest 설치 및 설정 완료
커버리지 리포트 생성 확인
Gemini 2.5 연동 AI 자동 분석 리포터 구현

테스트 코드는 처음 세팅이 가장 어렵다고 하는데, 테스트코드 파일 작성도 개발자가 비즈니스 로직이나 함수의 역할만 정확하게 알고 있고 그걸 AI에게 잘 설명만 해도 테스트코드 작성하는 비용이 크지 않습니다.