Vitestでテスト結果のカバレッジレポートを出力

はじめに

モジュール管理に続いて今度はVue.jsのテストカバレッジの出し方についての備忘メモです。

プロジェクトの作成

Vue.jsのプロジェクトはcreate-vueで作成します。

$ npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-sample
√ Add TypeScript? ... Yes
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes

Scaffolding project in xxxxxxxx

Done. Now run:

  cd vue-sample
  npm install
  npm run format
  npm run dev

Vitestを利用するため、√ Add Vitest for Unit Testing? でYesを選択します。

ライブラリの追加

Vitestのカバレッジプロバイダーをインストールします。

$ npm install @vitest/coverage-v8

v8とistanbulが利用可能ですが、デフォルトはv8なので今回はv8を利用します。

Vitestの設定追加

Vitestの実行やカバレッジ出力のための設定を追加します。
crete-vueでのプロジェクト作成時にVitestを選択したのでvitest.config.tsが作成されます。
vitest.config.tsにcoverageの設定を追加します。

vitest.config.ts

  test: {
    // 省略
    coverage: {
      reporter: ['text', 'json', 'html'],
    },
  },

package.jsonにカバレッジ出力するテストスクリプト(test:unit-with-coverage-report)を追記します。

package.json

"scripts": {

    省略
    
    "test:unit": "vitest",
    "test:unit-with-coverage-report": "vitest run --coverage",
    
    省略
}

Vitest実行結果

コンソールにてテストを実行します。
スクリプトは追加したtest:unit-with-coverage-reportを指定します。
テスト結果がコンソール上に表示されます。

$ npm run test:unit-with-coverage-report

> vue-sample@0.0.0 test:unit-with-coverage-report
> vitest run --coverage


 RUN  v1.2.0 ~/vue-sample
      Coverage enabled with v8

 ✓ src/components/__tests__/HelloWorld.spec.ts (1)
   ✓ HelloWorld (1)
     ✓ renders properly

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  21:19:02
   Duration  1.43s (transform 86ms, setup 0ms, collect 160ms, tests 23ms, environment 696ms, prepare 162ms)

 % Coverage report from v8
------------------------|---------|----------|---------|---------|-------------------
File                    | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------------------|---------|----------|---------|---------|-------------------
All files               |    9.73 |        0 |       0 |    9.73 |
 src                    |       0 |        0 |       0 |       0 |
  App.vue               |       0 |        0 |       0 |       0 | 1-85
  main.ts               |       0 |        0 |       0 |       0 | 1-14
 src/components         |   18.98 |        0 |       0 |   18.98 |
  HelloWorld.vue        |     100 |      100 |     100 |     100 |
  TheWelcome.vue        |       0 |        0 |       0 |       0 | 1-88
  WelcomeItem.vue       |       0 |        0 |       0 |       0 | 1-87
 src/components/icons   |       0 |        0 |       0 |       0 |
  IconCommunity.vue     |       0 |        0 |       0 |       0 | 1-7
  IconDocumentation.vue |       0 |        0 |       0 |       0 | 1-7
  IconEcosystem.vue     |       0 |        0 |       0 |       0 | 1-7
  IconSupport.vue       |       0 |        0 |       0 |       0 | 1-7
  IconTooling.vue       |       0 |        0 |       0 |       0 | 1-19
 src/router             |       0 |        0 |       0 |       0 |
  index.ts              |       0 |        0 |       0 |       0 | 1-23
 src/stores             |       0 |        0 |       0 |       0 |
  counter.ts            |       0 |        0 |       0 |       0 | 1-12
 src/views              |       0 |        0 |       0 |       0 |
  AboutView.vue         |       0 |        0 |       0 |       0 | 1-15
  HomeView.vue          |       0 |        0 |       0 |       0 | 1-9
------------------------|---------|----------|---------|---------|-------------------

また、プロジェクトのルートにcoverageフォルダが作成されカバレッジレポートがHTMLで出力されます。
HTMLファイルを開くと下記の通りカバレッジレポートが確認できます。