Zenn
🌟

Vitest UI で @vitest/coverage-v8 を使ったカバレッジレポートを見れるようにする方法

に公開
Vite
coverage
Vitest
vitestui
tech

これなに

テストランナーに vitest を採用している場合、実行結果をダッシュボードで見たり、再実行したりを、ブラウザ上のリッチな UI で可能にしてくれるのが Vitest UI なのですが、テストのカバレッジレポートをいい感じに同じ Vitest UI で確認出来るようにしたかったので方法を調べました。公式だと情報が少なく、ちと分かりづらかった部分があったので、備忘録として残しておきます。

以下、手順

@vitest/coverage-v8 の導入

vitest 導入済みである前提になりますが、カバレッジを取りたい場合は、加えてカバレッジレポート用のライブラリも必要になります。v8 と istanbul が利用可能のようで、デフォルトは v8 です。
ref：https://vitest.dev/guide/coverage.html#coverage

npm install -D @vitest/coverage-v8

vitest の設定ファイルで、coverage.reporter と coverage.reportsDirectory の設定をします。

vitest.config.ts
coverage: {
  reporter: ['text', 'json', 'html'], // html 指定してれば他はいらんかも
  reportsDirectory: './tests/unit/coverage', // レポートの保存先を適当に指定
},

カバレッジレポートの下準備はこれだけです。より、詳細な設定が知りたい方は公式ドキュメントを参照してください。

@vitest/ui の導入

Vitest UI のインストールがまだの場合はここで入れておきましょう。

npm install -D @vitest/ui

package.json にコマンドを設定します。vitest CLI にオプション --ui に加えて、--coverage もつけましょ。

package.json
"scripts": {
  "test:ui": "vitest --ui --coverage",
}

動作確認

  • @vitest/coverage-v8 v3.0.9
  • @vitest/ui v3.0.9

設定したコマンドを叩くと、ブラウザが立ち上がり、http://localhost:51204/__vitest__/ が開きます。

% npm run test:ui

> portfolio@0.0.0 test:ui
> vitest --ui  --coverage


 DEV  v3.0.9 /Users/motoshin/Projects/portfolio
      UI started at http://localhost:51204/__vitest__/
      Coverage enabled with v8

 ✓ src/components/__tests__/AboutMe.spec.ts (1 test) 7ms
 ✓ src/components/__tests__/ProfileLinks.spec.ts (2 tests) 42ms

 Test Files  2 passed (2)
      Tests  3 passed (3)
   Start at  15:36:20
   Duration  646ms (transform 59ms, setup 0ms, collect 223ms, tests 49ms, environment 505ms, prepare 60ms)

 % Coverage report from v8
--------------------------------|---------|----------|---------|---------|-------------------
File                            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------------------|---------|----------|---------|---------|-------------------
All files                       |   13.24 |    58.33 |   58.33 |   13.24 |                   
 portfolio                      |       0 |        0 |       0 |       0 |                   
  playwright.config.ts          |       0 |        0 |       0 |       0 | 1-110             
 portfolio/src                  |       0 |        0 |       0 |       0 |                   
  App.vue                       |       0 |        0 |       0 |       0 | 1-20              
  main.ts                       |       0 |        0 |       0 |       0 | 1-14              
 portfolio/src/components       |     100 |      100 |     100 |     100 |                   
  AboutMe.vue                   |     100 |      100 |     100 |     100 |                   
  ProfileLinks.vue              |     100 |      100 |     100 |     100 |                   
 portfolio/src/components/icons |       0 |      100 |     100 |       0 |                   
  IconCommunity.vue             |       0 |      100 |     100 |       0 | 2-5               
  IconDocumentation.vue         |       0 |      100 |     100 |       0 | 2-5               
  IconEcosystem.vue             |       0 |      100 |     100 |       0 | 2-5               
  IconSupport.vue               |       0 |      100 |     100 |       0 | 2-5               
  IconTooling.vue               |       0 |      100 |     100 |       0 | 3-17              
 portfolio/src/router           |       0 |        0 |       0 |       0 |                   
  index.ts                      |       0 |        0 |       0 |       0 | 1-23              
 portfolio/src/stores           |       0 |        0 |       0 |       0 |                   
  counter.ts                    |       0 |        0 |       0 |       0 | 1-12              
 portfolio/src/views            |       0 |      100 |     100 |       0 |                   
  AboutView.vue                 |       0 |      100 |     100 |       0 | 2-3               
  HomeView.vue                  |       0 |      100 |     100 |       0 | 2-8               
--------------------------------|---------|----------|---------|---------|-------------------
 PASS  Waiting for file changes...
       press h to show help, press q to quit

開くとこんな感じの画面になるので、左上メニューのフォルダっぽいアイコンをクリックします。

カバレッジレポートが UI 上で確認できます。お疲れ様でした。

ちなみに CLI に --coverageオプションを渡さなくても、vitest.config 側で、coverage.enabled を設定すれば同じ動きとなります。

Discussion