Vitestのカバレッジ機能を使ってみる

WebブラウザからGUIで確認することが可能

使い方

1. 依存関係をインストールする

npm

$ npm i -D vitest @vitest/coverage-istanbul

pnpm

$ pnpm add -D vitest @vitest/coverage-istanbul

2. Web UIを使う場合は追加でインストールする（任意）

npm

$ npm i -D @vitest/ui

pnpm

$ pnpm add -D @vitest/ui

code:example:vitest.config.ts

coverage: {

enabled: true,

provider: "istanbul",

}

全体の例)

code:vitest.config.ts

import { defineConfig, mergeConfig } from "vitest/config";

import viteConfig from "./vite.config";

export default mergeConfig(

viteConfig,

defineConfig({

test: {

environment: "jsdom",

coverage: {

enabled: true,

provider: "istanbul",

},

},

})

);

シェル上で実行する場合

code:example1:package.json

"scripts": {

"test": "vitest"

}

Web UIから実行する場合

code:example2:package.json

"scripts": {

"vitest-ui": "vitest --ui"

}

使ってみた

コマンドを実行する

シェル上で実行する場合

$ npm run test

$ pnpm test

Web UIから実行する場合

$ npm run vitest-ui

$ pnpm vitest-ui

Web UIから実行した後は、左上のこのボタンを押す

https://gyazo.com/602c383054ea430ec74e571327fa2b4a

このような画面が表示される

https://gyazo.com/c17281ea1842bc352cf76a185d030d3d

https://gyazo.com/4601880cc7f6fdc537fc6834b82e395c