How can i write test cases for this Feedback form using Vitest & vue/test-utils ?

[anayatkhan1]

Help me to solve this testing error.🙏

For this Feedback form component, I'm using the NUXT UI module.

<template>
    <div class="grid grid-cols-6 rounded-3xl mt-16">
        <div class="w-full max-w-sm col-start-2 col-span-4 lg:mx-auto">
            <UCard>
                <template #header
                    ><h2 class="text-3xl font-bold tracking-tight text-center">
                        Feedback
                    </h2></template
                >

                <form @submit.prevent="submitForm">
                    <div class="grid grid-cols-2 gap-y-6">
                        <div class="col-span-2">
                            <UFormGroup label="Name">
                                <UInput
                                    name="user-name"
                                    type="text"
                                    size="lg"
                                    placeholder="Your name"
                                    icon="i-heroicons-user-20-solid"
                                    
                            /></UFormGroup>
                        </div>
                        <div class="col-span-2">
                            <UFormGroup label="Email">
                                <UInput
                                    name="user-email"
                                    type="email"
                                    size="lg"
                                    placeholder="[email protected]"
                                    icon="i-heroicons-envelope"
                                    
                            /></UFormGroup>
                        </div>
                        <div class="col-span-2">
                            <UFormGroup label="Feedback">
                                <UTextarea
                                    name="user-message"
                                    size="lg"
                                    :rows="5"
                                    placeholder="Your message"
                                    
                            /></UFormGroup>
                        </div>
                        <div class="col-span-2">
                            <UButton
                                name="user-send-message"
                                block
                                size="lg"
                                type="submit"
                                label="Send message"
                            />
                        </div>
                    </div>
                </form>
            </UCard>
        </div>
    </div>
</template>
<script setup lang="ts">
import { z } from "zod";
const toast = useToast();
const runtimeConfig = useRuntimeConfig();

interface Feedback {
    name: string;
    email: string;
    feedback: string;
}
const formData = ref<Feedback>({
    name: "",
    email: "",
    feedback: "",
});
const validationSchema = z.object({
    name: z.string().nonempty("Name is required"),
    email: z
        .string()
        .nonempty("Email is required")
        .email({ message: "Must be a valid email" }),
    feedback: z.string().nonempty("Feedback Message is required"),
});

const submitForm = async () => {
    const valid = await validationSchema.safeParseAsync(formData.value);
    if (!valid.success) {
        const message = valid.error.issues[0].message;
        toast.add({
            title: message,
            color: "red",
        });
        return;
    }
    try {
        const { data, pending, error, refresh } = await useFetch(
            "/site/feedback",
            {
                method: "POST",
                baseURL: String(runtimeConfig.public.BASE_API_URL),
                body: JSON.stringify(formData.value),
            }
        );
        toast.add({
            title: "Thank you for your feedback!",
            color: "green",
        });
    } catch (error: any) {
        toast.add({
            title: "Oops! There was an error",
            description: error.value.message,
            color: "red",
        });
    }
};
</script>

This is vitest code for testing this form component

import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';

import Feedback from '../../pages/site/feedback.vue';

describe('Feedback Form is Testing', () => {
    
    it('components should be exists & Snapshot should be Matched', async () => {
        const wrapper = mount(Feedback, {
            
        });

        expect(wrapper.vm).toBeTruthy();
        expect(wrapper.html()).toMatchSnapshot();
    });

    it('Elements should be exists', async () => {
        const wrapper = mount(Feedback);

        const Input =  await wrapper.find('UInput');

        expect(Input.exists());
    });

});

I have been attempting to resolve this issue by seeking assistance from both Google and a Discord server { Nuxt, Vue Land, Vitest Dev, }. Despite my efforts, I have not yet found a solution. I kindly request your help in addressing this matter.

Thank You ⭐

[freakzlike]

I don't know about the Nuxt testing, maybe you can find something here: https://nuxt.com/docs/getting-started/testing. In the examples it's using @nuxt/test-utils which is probably setting up the required stuff you need.

From a general perspective it's missing the useToast import. From which vitest and @vue/test-utils don't know about. Did you configure any auto import plugin on vite like unplugin-auto-import