Vitest UI

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

bash

npm i -D @vitest/ui

--ui 플래그를 사용하여 UI 모드로 테스트를 실행할 수 있습니다.

bash

vitest --ui

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

UI는 리포터로도 사용할 수 있습니다. Vitest 구성에서 'html' 리포터를 사용하여 HTML 출력을 생성하고 테스트 결과를 미리 볼 수 있습니다.

// vitest.config.ts

export default {
  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