Vitest・Playwright テスト環境整備

朝、pnpm test を叩いたら36ファイル中29しかパスしていなかった。赤いバツが7つ並ぶターミナルを見て、今日はテストを全部通すまで他のことをしないと決めた。結果、夜には全34ファイル・14,817テストが緑のチェックマークに変わった。

e2eテストがVitestに拾われる問題

最初に気づいたのは、Playwright用のe2eテストファイルがVitestの対象に含まれていたこと。e2e/*.spec.ts をVitestが読みに行き、Playwrightのインポートで即座にコケる。

vitest.config.ts の exclude に '**/e2e/**' を追加して分離した。

// vitest.config.ts
test: {
  exclude: [
    '**/node_modules/**',
    '**/dist/**',
    '**/e2e/**',  // playwright e2e tests
  ],
}

これだけで36ファイル中31パスまで回復した。

残り5ファイルの失敗原因を一つずつ潰していった。データ構造の変更に追従できていないアサーションの修正、インポートパスのずれなど、どれも「コード本体は正しいのにテストが古い」パターンだった。

カバレッジを測るために @vitest/coverage-v8 をインストールした。最初に入れたバージョンがVitestのバージョンと一致せずエラーが出た。Vitestとcoverage-v8は同じバージョンに揃える必要がある。

pnpm add -D @vitest/coverage-v8@<vitestと同じバージョン>

バージョンを揃えた瞬間、カバレッジレポートが正常に出力された。

カバレッジ対象にデフォルト設定のまま走らせると、Vue SFC（.vueファイル）をv8がパースしようとしてエラーの山が出た。.vue のカバレッジ計測はViteの変換パイプラインとの兼ね合いで一筋縄ではいかない。

今回はロジック層の品質が知りたかっただけなので、カバレッジ対象を .ts ファイルのみに絞った。

coverage: {
  provider: 'v8',
  include: [
    'app/utils/**/*.ts',
    'app/composables/**/*.ts',
  ],
}

utils/ と composables/ 配下のTypeScriptファイルだけを計測対象にすることで、パースエラーが消え、測りたいロジックのカバレッジだけが見えるようになった。

レポートを眺めると、テストが薄い箇所がいくつか見つかった。テスト容易なユーティリティ3ファイルを選び、テストを並列で作成した。

対象は以下のようなファイル群。

いずれも純粋関数で、外部依存がなく、入力と出力の関係が明確。テストを書き始めてから実行まで手が止まらなかった。

Playwrightのe2eテストを3ファイル・16テストケースで構成した。

Vitestのユニットテストとは実行パスを完全に分けているので、pnpm test でユニットテストだけが走り、e2eは pnpm exec playwright test で別途実行する。