Astro + Vitest で getViteConfig の設定がうまくいかない時

AstroプロジェクトでVitestを使用する際の getViteConfig による設定の問題と、その解決方法について解説します。

更新日: 7/25/2025

getViteConfigに注意

主な問題

TypeScript型エラー

// これはエラーになります
export default getViteConfig({
  test: {
    include: ['./tests/*.{test,spec}.?(c|m)[jt]s?(x)'],
    environment: 'happy-dom',
  },
});

エラー内容

オブジェクト リテラルは既知のプロパティのみ指定できます。'test' は型 'UserConfig' に存在しません。ts(2353)
(*property*) test: { setupFiles: *string*[]; include: *string*[]; }

ISSUE - 課題

この問題は Astro 4.9.3 以降の回帰および Astro 5.0 の Vite 6 対応により発生しています。getViteConfig の型定義に test プロパティが含まれておらず、実行時にも正しく動作しません。

解決方法

mergeConfig で統合

import { defineConfig, mergeConfig } from 'vitest/config';
import { getViteConfig } from 'astro/config';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig(async (env) => {
  // getViteConfigは設定を返す
  const astroViteConfigFn = getViteConfig({
    plugins: [tsconfigPaths()],
  });

  // Vitestから受け取ったenvを使う
  const astroViteConfig = await astroViteConfigFn(env);

  // Vitest固有の設定を定義
  return mergeConfig(astroViteConfig, {
    test: {
      setupFiles: ['src/__tests__/setup.ts'],
      include: ['src/**/*.{test,spec}.ts'],
      environment: 'happy-dom',
    },
  });
});

書き方のポイント

defineConfig(async (env) => {}) でVitest設定関数を定義
getViteConfig({})(env) でAstro設定を取得
mergeConfig() でAstro設定とVitest設定を統合

この方法で型エラーと実行時エラーを回避し、AstroプロジェクトでVitestを使用できます。