はじめに

この記事は、viteから@nuxt/test-utilsに移行するとき躓いた点をメモしたものです。

viteを使用していた時のconfigのまま@nuxt/test-utils使うとエラーになる

nuxtプロジェクトで自動テスト(vitest)を使用しているとランタイム状態でのテストを実施したい時が出てくると思います。
例えば、フロント側のボタンが押されたらuseFetchでDBにアクセスし対象のデータを取得し表示するなど。
そのような場合@nuxt/test-utilsを使うと便利です。
下記サンプルコードをvitestで動かすとregisterEndpointがapi serverの代わりになるのですがエラーになります。

エラー
SyntaxError: At least one <template> or <script> is required in a single file component.

vite.config.ts

// import { defineConfig } from "vite";
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
    plugins: [
        Vue(),
        vuetify()
    ],
})

index.vue

<template>
    <v-btn @click="add()" id="addButton">ユーザー登録</v-btn>

    <v-alert
        v-model="userAddAlert"
        :title="alertUserAddText"
        id="addUserAlert"
    >
    </v-alert>
</template>

<script lang="ts" setup>
    import { ref } from "vue";

    // ユーザー追加アラート
    const userAddAlert = ref(true);
    let alertUserAddText = ref("ユーザー登録結果が表示されます");

    const add = async () : Promise<any> => {
        try {
            const response : object = await useFetch("/api/addUser", {
                method: 'POST',
                body: {
                    // なにか
                },
                headers: {
                    Accept: 'application/json'
                }
            })

            // responseの処理
            alertUserAddText.value = response.data.value.message;
        } 
        catch (err) {
            console.log("ユーザー登録失敗");
        }
    }
</script>

import { describe, test, expect } from "vitest";
import index  from "~/components/AddUser.vue"
import { mount } from "@vue/test-utils";

describe("index.vue add user success", () => {
    registerEndpoint("/api/addUser",{
        handler: () => ({
            message: "ユーザー登録完了",
        }),
        method: "POST"
    });
  
    test("ユーザー追加処理のフロントテスト", async () => {
        const wrapper = mount(index);
        // クリックしてもエラーになる    
        wrapper.findComponent('#addButton').trigger('click');
    });
});

@nuxt/test-utilsの時はpluginsはいらない

調べてもわからなかったのでリポジトリにissueなげてみました。
返信がきて@nuxt/test-utilsの時はpluginsはいらないそうです。
ランタイム状態のテスト環境になるのでpluginを勝手に読み込んでくれるみたいですね。
エラーの原因はpluginを2重に読み込んでいたことが影響したのだと思います。

vite.config.ts

// import { defineConfig } from "vite";
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
    plugins: [
        // なにもかかない
    ],
})

参考文献

@nuxt/test-utils issue