Closed4

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

drumnistnakanodrumnistnakano

目的

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

カバレッジレポートは簡単に出力できる
https://qiita.com/yuuman/items/c7cd3bad03b90920c839

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;
};

drumnistnakanodrumnistnakano

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

このスクラップは2024/08/02にクローズされました