Closed4
VitestでカバレッジをGitHubのPRで表示できるか調査

目的
- Vitestを使ってテストカバレッジを表示できるようにする
- GitHub ActionsのPullRequestに表示できると尚よし
- ActionsのWorkflowはできるだけ公式がだしているサードパーティActionsによせたい

カバレッジレポートは簡単に出力できる
package.json
~~~
"scripts": {
"test": "vitest run",
"test:coverage": "vitest run --coverage",
"test:ui": "vitest --ui",
},
~~~
viteのconfigでvitestのテストを定義できる
vite.config.ts
/// <reference types="vitest" />
/// <reference types="vite/client" />
import fs from "node:fs";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import react from "@vitejs/plugin-react-swc";
import { type UserConfigExport, loadEnv } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default async ({ mode }): Promise<UserConfigExport> => {
// @see https://vitejs.dev/config/#using-environment-variables-in-config
const env = loadEnv(mode, process.cwd(), "");
const config: UserConfigExport = {
root: "./",
plugins: [react(), tsconfigPaths()],
// @see https://vitest.dev/guide/#configuring-vitest
test: {
include: ["src/**/*.test.{ts,tsx}"],
environment: "jsdom",
coverage: {
provider: "v8",
reporter: ["html"],
reportsDirectory: "./coverage",
},
},
};
if (["LOCAL"].includes(env.VITE_STAGE_NAME)) {
return {
...config,
server: {
https: {
key: fs.readFileSync("./localhost-key.pem"),
cert: fs.readFileSync("./localhost.pem"),
},
},
};
}
return config;
};

テスト結果は、./coverage配下にできる。
index.htmlをブラウザで開けば、テスト結果の詳細が表示可能

vitest-coverage-reportというサードパーティのツールはあった
このスクラップは2024/08/02にクローズされました