Vite×Vitest の構築で ‘test’ does not exist in type ‘UserConfigExport’ にハマった

こんにちは。

FRUITS ZIPPER の「NEW KAWAII」のちょいちょいダサい振り付けにハマっているはこだてたろうです。
ダサいんですが、なんか気になってしまいます。いい意味で、です。

さて、ハマった違いではありますが、Perplexity で Vite×React×TestingLibrary の環境を立ち上げましたが、設定でどうにも納得いかないところがあり、ハマっていました。

あわせて読みたい

Perplexityに聞いてVite×React×TestingLibraryの環境を構築する こんにちは。エニタイムを退会することにしたはこだてたろうです。Youtubeで、なかやまきんに君の良さそうな動画があったので、スキマ時間にコツコツと筋肉を痛めつけて…

vite.config.ts に Vitest の設定を組み込む場合、以下のように書きます。

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.ts',
  }
})

しかし、どうも私の環境では 'test' does not exist in type 'UserConfigExport' というコンパイルエラーが出てしまいます。

他の記事を参照すると「defineConfig を vitest/config からインポートせよ」だとか「トリプルスラッシュディレクティブで型補完せよ」といった情報が得られますが、それでは解決しませんでした。

前述の記事では、vite.config.ts にテストの設定を入れるのをやめ、 vitest.config.ts を作成する形で対応しました。

でも、できるはずなのにできないのがどうにも納得いかず気になってしまい、また少し調べてみました。

Vitest 2系が Vite 6系をサポートしていなかった

結論から言うと、バージョンのせいでした。

忙しい方のために、Vite 6系と Vitest 2系を使っている場合は Vite 5系にバージョンを落とすことでエラーが解消します。

GitHub

test does not exist in type UserConfigExport · vitest-dev vitest · Discussion #5849 We originally had the triple-slash approach to solve the error that UserConfigExport didn't define a property test (which is for the vitest configuration block)...

上記のイシューに「複数のバージョンの Vite がインストールされている場合に起こる」という記述がありました。

npm explain vite で依存関係を見てみたところ、たしかにvite@6.0.7 と vite@5.4.11 がインストールされていることが確認できました。

npm dedupe で重複排除を行いましたが、依存関係は変わらず。

node_modules を消してから npm install をしても変わらず。

GitHub

TS error in defineConfig: 'test' does not exist in type 'UserConfigExport' · vitest-dev vitest · Dis... Hello, I have some problems with setting up vitest to work with vite and ts... Here is my vite.config,ts I added reference types as mentioned in https://vitest....

どうしたものかと調査を進めていると、別のイシューについたコメントに「Vite と Vitest の互換性を確認してね」「Vite の最新版使うなら Vitest は 3系じゃないとダメだよ」と書かれているのを発見しました。

Vitest の Release Note を見てみると、Vite 6系のサポートは Vitest 3系からで、Vitest 3系はまだベータ版である、ということがわかりました。

GitHub

Releases · vitest-dev/vitest Next generation testing framework powered by Vite. - vitest-dev/vitest

結局のところ、Vite 5系の最新である 5.4.11 にバージョンを落としてみたところ、'test' does not exist in type 'UserConfigExport' のエラーはようやく解消されました。

AIにきくとき、新しい技術やアップデート直後は注意

Vite 6系のリリースは 2024年11月末とのことなので、ついこの間リリースされたようですね。

今回のようにアップデート直後のタイミングでは、Perplexityの生成するコードに即座に反映させることが難しい場合があります。

Perplexity に聞いてもエラーがどうにも解消しない場合、バージョンの問題がないか、一度確認してみましょう。