こんにちは、エンジニアの籏野です。
アプリケーション開発において、テストを書くということは非常に重要です。
テストを書く際の一つの指標としてカバレッジを計測することがあると思います。
弊社でもカバレッジの計測を行っているのですが、モノレポ構成のプロジェクトでプロジェクト全体のカバレッジを計測したいという要望がありました。
プロジェクト内に存在する複数のパッケージ/アプリケーションそれぞれでのテスト実行・カバレッジ計測はできていたのですが、プロジェクト全体のカバレッジ計測は行ったことがなかったので今回調べました。
テストランナーにはvitestを使用しており、vitestのWorkspace機能を使えばよいことがわかりましたので、その手順を紹介します。
Workspace機能の利用
詳細については公式のドキュメントを参照してください。
Workspace機能を有効にするために必要な手順をまとめると以下の通りです。
- 各パッケージ内に存在する
vitest.config.tsでdefineConfigではなく、defineProjectを利用するように変更 - プロジェクトルートにて
vitestをインストール -
vitest.workspace.tsを作成
defineProjectを利用した場合の、vitest.config.tsは例えば以下のようになります。
/// <reference types="vitest/config" />
import { defineProject } from "vitest/config";
export default defineProject({
test: {
globals: true,
},
});
また、vitest.workspace.tsは以下のようになります。
import { defineWorkspace } from "vitest/config";
export default defineWorkspace(["packages/*"]);
上記対応後にプロジェクトルートにて vitest runを実行すると、すべてのパッケージのテストが実行されます。
$ npx vitest run
RUN v1.6.0 /hoge
· |@hoge/a| src/...
· |@hoge/b| src/...
· |@hoge/c| src/...
特定のプロジェクトのみをテストする場合は、--projectオプションを利用します。
$ npx vitest run --project @hoge/a
カバレッジ計測
カバレッジ計測を行うためにはプロジェクトルートにvitest.config.tsを作成し、coverageオプションを指定します。
例えば以下のように設定します。
/// <reference types="vitest/config" />
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
globals: true,
coverage: {
provider: "istanbul",
reporter: ["text", "html"],
all: true,
include: ["**/src/**/*.ts"],
exclude: ["**/__test__/**"],
},
},
});
この状態で、vitest run --coverageを実行することで、プロジェクト全体のカバレッジを計測することができます。
$ npx vitest run --coverage
RUN v1.6.0 /hoge
Coverage enabled with istanbul
· |@hoge/a| src/...
· |@hoge/b| src/...
· |@hoge/c| src/...
% Coverage report from istanbul
---------------------------------------------------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
---------------------------------------------------------|---------|----------|---------|---------|-------------------
All files | XX.XX | XX | XX.XX | XX.XX |
packages/a | 72.72 | 100 | 60 | 70 |
packages/b | 95.65 | 50 | 95.65 | 95.65 |
packages/c | 95.65 | 50 | 95.65 | 95.65 |
...
最後に、今回作成した各ファイルとディレクトリ構造をまとめるとは以下のようになります。
※不要なファイルは省略しています。
.
├── packages
│ ├── a
│ │ └── vitest.config.mts
│ ├── b
│ │ └── vitest.config.mts
│ └── c
│ └── vitest.config.mts
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── vitest.config.mts
└── vitest.workspace.mts
まとめ
今回はvitestのWorkspace機能を利用して、プロジェクト全体のカバレッジを計測する方法を紹介しました。
カバレッジはプロジェクトの品質を保つための一つの指標として重要ですし、何よりも数値化されることでテストを書くモチベーションにもなります。
ぜひvitestを使ってカバレッジ計測を行ってみてください。
この記事を書いた人
籏野 拓
2018年新卒入社
Discussion