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

[anayatkhan1]

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>

<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({
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 ⭐

[Shyam-Chen]

https://vitest.dev/guide/snapshot.html

[anayatkhan1]

The main problem that i faced from unit testing is, it gives me error useToast, runtimeconfig & ref are not defined thats why i can't mount the nuxt component.

[qin-guan]

It seems like the auto-imports are not being registered properly. You may want to use the Vitest library for Nuxt.

https://nuxt.com/modules/vitest

[anayatkhan1]

you are right it is a autoimport issue in nuxt

i have solved this problem
here is the readme doc where i shared how i solved this auto-imports issue without using nuxt-vitest

Readme: https://github.com/anayatkhan1/Unit_testing_in_nuxt

[iyanaiExtendas]

Hi @anayatkhan1, I followed your Readme instructions as I have been facing issues with primevue's Toast component.
Error: No PrimeVue Toast provided!

However, I am still experiencing issues. Providing the import vue from "@vitejs/plugin-vue"; in vitest.config.ts breaks my other tests, giving this error message:
SyntaxError: At least one or <script> is required in a single file component.

Is there another method to evade the initial Error: No PrimeVue Toast provided!