diff --git a/test/component-render.ts b/test/component-render.ts
index ab1ec2be..d1a0b433 100644
--- a/test/component-render.ts
+++ b/test/component-render.ts
@@ -1,5 +1,5 @@
+import path from 'node:path'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import path from 'path'
 
 export default async function (nameOrHtml: string, options: any, component: any) {
   let html: string
diff --git a/test/components/Checkbox.spec.ts b/test/components/Checkbox.spec.ts
index d097b64c..2f0d6f06 100644
--- a/test/components/Checkbox.spec.ts
+++ b/test/components/Checkbox.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
+import { defu } from 'defu'
 import Checkbox, { type CheckboxProps } from '../../src/runtime/components/Checkbox.vue'
 import ComponentRender from '../component-render'
-import { defu } from 'defu'
 
 describe('Checkbox', () => {
   it.each([
@@ -16,15 +16,14 @@ describe('Checkbox', () => {
     ['with indeterminate', { props: { indeterminate: true } }],
     ['with help', { props: { label: 'Label', help: 'Help' } }],
     ['with required', { props: { label: 'Label', required: true } }],
-    ['with custom color', { props: { label: 'Label', color: 'red' } }],
+    ['with custom color', { props: { label: 'Label', color: 'red' as const } }],
     ['with size 2xs', { props: { size: '2xs' as const } }],
     ['with size xs', { props: { size: 'xs' as const } }],
     ['with size sm', { props: { size: 'sm' as const } }],
     ['with size md', { props: { size: 'md' as const } }],
     ['with size lg', { props: { size: 'lg' as const } }],
     ['with size xl', { props: { size: 'xl' as const } }]
-    // @ts-ignore
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CheckboxProps }) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CheckboxProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, defu(options, { props: { id: 42 } }), Checkbox)
     expect(html).toMatchSnapshot()
   })
diff --git a/test/components/Form.spec.ts b/test/components/Form.spec.ts
index 5c910869..0273f95f 100644
--- a/test/components/Form.spec.ts
+++ b/test/components/Form.spec.ts
@@ -1,5 +1,13 @@
 import { reactive, ref, nextTick } from 'vue'
 import { describe, it, expect, test, beforeEach, vi } from 'vitest'
+import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
+import { flushPromises } from '@vue/test-utils'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { z } from 'zod'
+import * as yup from 'yup'
+import Joi from 'joi'
+import * as valibot from 'valibot'
+import ComponentRender from '../component-render'
 import type { FormProps } from '../../src/runtime/components/Form.vue'
 import {
   UForm,
@@ -15,16 +23,8 @@ import {
   // UToggle,
   // URange
 } from '#components'
-import { DOMWrapper, flushPromises, VueWrapper } from '@vue/test-utils'
-import ComponentRender from '../component-render'
 
-import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { z } from 'zod'
-import * as yup from 'yup'
-import Joi from 'joi'
-import * as valibot from 'valibot'
-
-async function triggerEvent (
+async function triggerEvent(
   el: DOMWrapper<Element> | VueWrapper<any, any>,
   event: string
 ) {
@@ -32,7 +32,7 @@ async function triggerEvent (
   return flushPromises()
 }
 
-async function setValue (
+async function setValue(
   el: DOMWrapper<Element> | VueWrapper<any, any>,
   value: any
 ) {
@@ -40,13 +40,14 @@ async function setValue (
   return flushPromises()
 }
 
-async function renderForm (options: {
+async function renderForm(options: {
   props: Partial<FormProps<any>>
   slotVars?: object
   slotComponents?: any
   slotTemplate: string
 }) {
   const state = reactive({})
+
   return await mountSuspended(UForm, {
     props: {
       id: 42,
@@ -55,8 +56,8 @@ async function renderForm (options: {
     },
     slots: {
       default: {
-        // @ts-ignore
-        setup () {
+        // @ts-expect-error setup does not exist on type
+        setup() {
           return { state, ...options.slotVars }
         },
         components: {
@@ -112,7 +113,7 @@ describe('Form', () => {
     }
     ],
     ['custom', {
-      async validate (state: any) {
+      async validate(state: any) {
         const errs = []
         if (!state.email)
           errs.push({ name: 'email', message: 'Email is required' })
@@ -152,7 +153,7 @@ describe('Form', () => {
 
     await triggerEvent(form, 'submit.prevent')
 
-    // @ts-ignore
+    // @ts-expect-error object is possibly undefined
     expect(wrapper.emitted('error')[0][0].errors).toMatchObject([
       {
         id: 'password',
@@ -181,7 +182,7 @@ describe('Form', () => {
     const wrapper = await renderForm({
       props: {
         validateOn: ['blur'],
-        async validate (state: any) {
+        async validate(state: any) {
           if (!state.value)
             return [{ name: 'value', message: 'Error message' }]
           return []
@@ -216,7 +217,7 @@ describe('Form', () => {
     const wrapper = await renderForm({
       props: {
         validateOn: ['change'],
-        async validate (state: any) {
+        async validate(state: any) {
           if (!state.value)
             return [{ name: 'value', message: 'Error message' }]
           return []
@@ -416,7 +417,7 @@ describe('Form', () => {
     const wrapper = await renderForm({
       props: {
         validateOn: ['input', 'blur'],
-        async validate (state: any) {
+        async validate(state: any) {
           if (!state.value)
             return [{ name: 'value', message: 'Error message' }]
           return []
@@ -445,11 +446,10 @@ describe('Form', () => {
 
     await setValue(input, validInputValue)
     // Waiting because of the debounced validation on input event.
-    await new Promise((r) => setTimeout(r, 50))
+    await new Promise(r => setTimeout(r, 50))
     expect(wrapper.text()).not.toContain('Error message')
   })
 
-
   describe('api', async () => {
     let wrapper: any
     let form: any
@@ -462,7 +462,7 @@ describe('Form', () => {
           UForm,
           UInput
         },
-        setup () {
+        setup() {
           const form = ref()
           const state = reactive({})
           const schema = z.object({
@@ -605,7 +605,7 @@ describe('Form', () => {
           UForm,
           UInput
         },
-        setup () {
+        setup() {
           const form = ref()
           const state = reactive({ nested: {} })
           const schema = z.object({
@@ -618,7 +618,6 @@ describe('Form', () => {
             field: z.string().min(1)
           })
 
-
           const onError = vi.fn()
           const onSubmit = vi.fn()
 
@@ -651,7 +650,7 @@ describe('Form', () => {
       expect(wrapper.setupState.onSubmit).not.toHaveBeenCalled()
       expect(wrapper.setupState.onError).toHaveBeenCalledTimes(1)
       const onErrorCallArgs = wrapper.setupState.onError.mock.lastCall[0]
-      expect(onErrorCallArgs.childrens[0].errors).toMatchObject([ { id: 'nestedInput', name: 'field', message: 'Required' } ])
+      expect(onErrorCallArgs.childrens[0].errors).toMatchObject([{ id: 'nestedInput', name: 'field', message: 'Required' }])
       expect(onErrorCallArgs.errors).toMatchObject([
         { id: 'emailInput', name: 'email', message: 'Required' },
         { id: 'passwordInput', name: 'password', message: 'Required' }
diff --git a/test/components/Input.spec.ts b/test/components/Input.spec.ts
index 5793a616..ca9b7e6f 100644
--- a/test/components/Input.spec.ts
+++ b/test/components/Input.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
 import Input, { type InputProps } from '../../src/runtime/components/Input.vue'
 import ComponentRender from '../component-render'
-import { mount } from '@vue/test-utils'
 
 describe('Input', () => {
   it.each([
@@ -35,9 +35,9 @@ describe('Input', () => {
   })
 
   it.each([
-    ['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input  ', expected: 'input' } ],
-    ['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 } ],
-    ['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' } ]
+    ['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input  ', expected: 'input' }],
+    ['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }],
+    ['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }]
   ])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => {
     const wrapper = mount(Input, {
       ...options
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
index 71ca6917..799d5133 100644
--- a/test/components/RadioGroup.spec.ts
+++ b/test/components/RadioGroup.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
+import { defu } from 'defu'
 import RadioGroup, { type RadioGroupProps } from '../../src/runtime/components/RadioGroup.vue'
 import ComponentRender from '../component-render'
-import { defu } from 'defu'
 
 const defaultOptions = [
   { value: '1', label: 'Option 1' },
diff --git a/test/components/Textarea.spec.ts b/test/components/Textarea.spec.ts
index 3a0dd437..1e3dee67 100644
--- a/test/components/Textarea.spec.ts
+++ b/test/components/Textarea.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
 import Textarea, { type TextareaProps } from '../../src/runtime/components/Textarea.vue'
 import ComponentRender from '../component-render'
-import { mount } from '@vue/test-utils'
 
 describe('Textarea', () => {
   it.each([
@@ -12,26 +12,25 @@ describe('Textarea', () => {
     ['with required', { props: { required: true } }],
     ['with disabled', { props: { disabled: true } }],
     ['with rows', { props: { rows: 5 } }],
-    ['with size', { props: { size: 'sm' } }],
-    ['with color', { props: { color: 'blue' } }],
+    ['with size', { props: { size: 'sm' as const } }],
+    ['with color', { props: { color: 'blue' as const } }],
     ['with size 2xs', { props: { size: '2xs' as const } }],
     ['with size xs', { props: { size: 'xs' as const } }],
     ['with size sm', { props: { size: 'sm' as const } }],
     ['with size md', { props: { size: 'md' as const } }],
     ['with size lg', { props: { size: 'lg' as const } }],
     ['with size xl', { props: { size: 'xl' as const } }],
-    ['with variant', { variant: 'outline' }],
+    ['with variant', { props: { variant: 'outline' as const } }],
     ['with default slot', { slots: { default: () => 'Default slot' } }]
-    // @ts-ignore
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props: TextareaProps, slots?: any }) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TextareaProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, Textarea)
     expect(html).toMatchSnapshot()
   })
 
   it.each([
-    ['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input  ', expected: 'input' } ],
-    ['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 } ],
-    ['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' } ]
+    ['with .trim modifier', { props: { modelModifiers: { trim: true } } }, { input: 'input  ', expected: 'input' }],
+    ['with .number modifier', { props: { modelModifiers: { number: true } } }, { input: '42', expected: 42 }],
+    ['with .lazy modifier', { props: { modelModifiers: { lazy: true } } }, { input: 'input', expected: 'input' }]
   ])('%s works', async (_nameOrHtml: string, options: { props?: any, slots?: any }, spec: { input: any, expected: any }) => {
     const wrapper = await mount(Textarea, {
       ...options