モノレポ構成でVitestのテストがVSCode上から実行できないとき

TL;DR

• 全部のプロジェクトにvite/vitest.config.ts を作ろう
• Configファイルが3つ以上ある場合は vitest.workspace.ts を作ろう

VSCode上でテストが実行できない

https://marketplace.visualstudio.com/items?itemName=vitest.explorer
↑の拡張機能をインストールしたのにVSCode上からVitestのテストが実行できなかった

• Test Explorerに対象のテストが出てこない
• エディターガター(editor gutter)のテスト実行ボタンが出てこない

Test Explorer	エディターガター(editor gutter)のテスト実行ボタン

https://code.visualstudio.com/docs/debugtest/testing#_run-and-debug-tests

原因

対象のプロジェクト(パッケージ)直下にVitestのConfigファイル(vite/vitest.config.ts)がなかったとこが原因でした。

<monorepo-prjs>/packages/<package-name>/vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    // ... Specify options here.
  },
})

ハマったこと

自分の環境だとConfigファイルを作成しただけだと解決しませんでした。
こんな感じの構成でした。

<monorepo-prjs>
├── apps
│   ├── app-a
│   │   ├── ...
│   │   ├── package.json
│   │   └── vite.config.ts
│   └── app-b
│       ├── ...
│       ├── package.json
│       ├── vite.config1.config.ts
│       └── vite.config2.config.ts
└── packages
    ├── package-a
    │   ├── ...
    │   ├── package.json
    │   └── vitest.config.ts
    └── package-b
        ├── ...
        ├── package.json
        └── vitest.config.ts

4ファイル以上のConfigファイルがある場合とダメ

Vitestの拡張機能はデフォルトで3つまでしかViteのConfigファイルを読み込めません。

Vitest found multiple config files. The extension will use only the first 3 due to performance concerns. Consider using a workspace configuration to group your configs or increase the limit via "vitest.maximumConfigs" option.

4つ以上のConfigファイルがある場合はVSCodeの設定で読み込めるファイル数の上限をあげる必要があります。

<monorepo-prjs>/.vscode/settings.json

{
  "vitest.maximumConfigs": 5 // デフォルトは 3
}

設定で読み込めるファイル数の上限を上げることで解決できますが、vitest.workspace.ts を作ることで毎回上限を調整する必要がなくなります。

同じ階層のConfigファイルは必ず一つだけ指定する

Configファイルが4ファイル以上になるとVitestの拡張がvitest.workspace.tsを自動で作成してくれるボタンが出てきます。

作成ボタンを押下するとモノレポのリポジトリ直下にプロジェクトに存在する全てのConfigファイルを含めたvitest.workspace.tsができます。

<monorepo-prjs>/vitest.workspace.ts

import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  "./apps/app-a/vite.config.ts",
  "./apps/app-b/vite.config1.config.ts",
  "./apps/app-b/vite.config2.config.ts",
  "./packages/package-a/vitest.config.ts",
  "./packages/package-b/vitest.config.ts"
])

この時、同じプロジェクト内のConfigファイルが複数存在したためと以下のエラーがでました。
（この例だと、app-bのvite.config1.config.tsとvite.config2.config.ts）

All projects in a workspace should have unique names. Make sure your configuration is correct.

vite.config1.config.tsにのみVitestの設定が記述してあるため、defineWorkspaceの中からvite.config2.config.tsを削除しました。

<monorepo-prjs>/vitest.workspace.ts

import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  "./apps/app-a/vite.config.ts",
  "./apps/app-b/vite.config1.config.ts",
- "./apps/app-b/vite.config2.config.ts",
  "./packages/package-a/vitest.config.ts",
  "./packages/package-b/vitest.config.ts"
])

削除後にTest ExplorerのRefresh Testsを行うと無事全てのテストがVSCode上から実行できるようになりました 🎉