feat(helper): support options for mountSuspeded

* Add options to `mountSuspended` helper
* Create a new component to test passing props/slots to async component
* Test the default and passed props/slots to async components

packages/vitest-environment-nuxt/src/runtime/mount.ts

@@ -1,4 +1,4 @@
-import { mount, VueWrapper } from '@vue/test-utils'
+import { mount, MountingOptions, VueWrapper } from '@vue/test-utils'
 import { h, DefineComponent, Suspense, nextTick } from 'vue'
 
 import { RouterLink } from './components/RouterLink'
@@ -8,7 +8,7 @@ import NuxtRoot from '#build/root-component.mjs'
 
 export async function mountSuspended<
   T extends DefineComponent<any, any, any, any>
->(component: T) {
+>(component: T, options?: MountingOptions<any>) {
   return new Promise<VueWrapper<InstanceType<T>>>(resolve => {
     const vm = mount(
       {
@@ -17,12 +17,22 @@ export async function mountSuspended<
           h(
             Suspense,
             { onResolve: () => nextTick().then(() => resolve(vm as any)) },
-            { default: () => h(component) }
+            {
+              default: () =>
+                h(
+                  component,
+                  { ...options?.props, ...options?.attrs },
+                  { ...options?.slots }
+                ),
+            }
           ),
       },
       {
+        ...options,
         global: {
+          ...options?.global,
           components: {
+            ...options?.global?.components,
             RouterLink,
           },
         },

playground/components/AsyncComponentWithProps.vue

@@ -0,0 +1,19 @@
+<template>
+  <h2>{{ title }}</h2>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title?: string
+  }>(),
+  {
+    title: 'The original',
+  }
+)
+const title = ref(props.title)
+await new Promise(resolve => setTimeout(resolve, 1))
+</script>

playground/tests/nuxt/index.spec.ts

@@ -4,6 +4,7 @@ import { mountSuspended, registerEndpoint } from 'vitest-environment-nuxt/utils'
 
 import App from '~/app.vue'
 import FetchComponent from '~/components/FetchComponent.vue'
+import AsyncComponentWithProps from '~~/components/AsyncComponentWithProps.vue'
 
 describe('client-side nuxt features', () => {
   it('can use core nuxt composables within test file', () => {
@@ -43,6 +44,35 @@ describe('test utils', () => {
     `)
   })
 
+  it('should render default props within nuxt suspense', async () => {
+    const component = await mountSuspended(AsyncComponentWithProps)
+    expect(component.find('h2').html()).toMatchInlineSnapshot(
+      '"<h2>The original</h2>"'
+    )
+  })
+
+  it('should render passed props within nuxt suspense', async () => {
+    const component = await mountSuspended(AsyncComponentWithProps, {
+      props: {
+        title: 'title from mount suspense props',
+      },
+    })
+    expect(component.find('h2').html()).toMatchInlineSnapshot(
+      '"<h2>title from mount suspense props</h2>"'
+    )
+  })
+
+  it('can pass slots to mounted components within nuxt suspense', async () => {
+    const component = await mountSuspended(AsyncComponentWithProps, {
+      slots: {
+        default: 'slot from mount suspense',
+      },
+    })
+    expect(component.find('div').html()).toMatchInlineSnapshot(
+      '"<div>slot from mount suspense</div>"'
+    )
+  })
+
   it('can mock fetch requests', async () => {
     registerEndpoint('https://jsonplaceholder.typicode.com/todos/1', () => ({
       title: 'title from mocked api',