Vitestでテストを実行すると出るエラーについて(Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.)

概要

Vue3で推奨されているテストフレームワーク「Vitest」を使用してテストを実行すると以下のエラーが出ました。

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
 ❯ formatError node_modules/vite/dist/node/chunks/dep-439026c8.js:43888:46
 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-439026c8.js:43884:19
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-439026c8.js:41641:22
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-439026c8.js:44178:30
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-439026c8.js:54813:29

原因

どうやらVitestの設定ファイルvitest.config.jsの書き方が間違っていたみたいです。

解決法

vitest.config.jsを以下のように書き換えたところテストが実行できるようになりました。
以下はVueアプリを作成した際にvitestを選択するとデフォルトで作成されるvitest.config.jsです。

vitest.config.js

import { fileURLToPath } from 'node:url';
import { mergeConfig, defineConfig } from 'vite';
import { configDefaults } from 'vitest/config';
import viteConfig from './vite.config';

export default mergeConfig(
    viteConfig,
    defineConfig({
        test: {
            environment: 'jsdom',
            exclude: [...configDefaults.exclude, 'e2e/*'],
            root: fileURLToPath(new URL('./', import.meta.url)),
            transformMode: {
                web: [/\.[jt]sx$/],
            },
        },
    })
);

終わりに

比較的新しいフレームワークということでエラーの解決方法なども調べても出てこず苦労しましたが、いろいろ試してみると何とか解決できました。