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

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

# プロジェクトの作成
Vue.jsのプロジェクトは[create-vue](https://github.com/vuejs/create-vue)で作成します。

```shell
$ 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のカバレッジプロバイダーをインストールします。

```shell
$ npm install @vitest/coverage-v8
```

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

https://vitest.dev/guide/coverage

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

```typescript:vitest.config.ts
  test: {
    // 省略
    coverage: {
      reporter: ['text', 'json', 'html'],
    },
  },
```

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

```json:package.json
"scripts": {

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

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

```shell
$ 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ファイルを開くと下記の通りカバレッジレポートが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177076/7d6ad06c-3532-cd89-49f6-4bc278aee8d2.png)