Vitest UI

Vite를 기반으로 하는 Vitest는 테스트 실행 시 내부적으로 개발 서버를 구동합니다. 이를 통해 Vitest는 테스트를 확인하고 상호작용할 수 있는 직관적인 UI를 제공합니다. Vitest UI는 선택 사항이므로 다음 명령어를 사용하여 설치해야 합니다.

bash

npm i -D @vitest/ui

그런 다음 --ui 플래그를 전달하여 UI로 테스트를 시작할 수 있습니다.

bash

vitest --ui

Vitest UI는 http://localhost:51204/__vitest__/에서 접속할 수 있습니다.

WARNING

UI는 상호작용이 가능하며 실행 중인 Vite 서버가 필요하므로 Vitest를 watch 모드(기본값)로 실행해야 합니다. 또는 설정 파일의 reporters 옵션에서 html을 지정하여 Vitest UI와 동일한 형태의 정적 HTML 보고서를 생성할 수 있습니다.

UI는 리포터(reporter)로도 활용 가능합니다. Vitest 설정에서 'html' 리포터를 사용하여 HTML 출력을 생성하고 테스트 결과를 미리 확인할 수 있습니다.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    reporters: ['html'],
  },
});

Vitest UI에서 커버리지 보고서를 확인할 수 있습니다. 자세한 내용은 Vitest UI 커버리지를 참고하세요.

WARNING

터미널에서 테스트 실행 현황을 실시간으로 확인하려면 reporters 옵션에 default 리포터를 추가하는 것을 잊지 마세요: ['default', 'html'].

TIP

HTML 보고서를 확인하려면 vite preview 명령을 사용할 수 있습니다.

npx vite preview --outDir ./html

출력 경로는 outputFile 설정 옵션을 통해 지정할 수 있습니다. 이때 .html 경로를 지정해야 하며, 예를 들어 ./html/index.html이 기본값입니다.

Vitest UI ​

Vitest UI