feat(runtime-utils): improve setupState type mount + render helpers

Author: yamachi4416

examples/app-vitest-full/tests/nuxt/compatibility-mount.spec.ts

@@ -649,7 +649,7 @@ describe('mountSuspended() compatible to mount()', () => {
 
   it('getCurrentComponent().proxy for compatibity for nuxt/test-utils v3.20.0', async () => {
     const wrapper = await mountSuspended(CompostionApi)
-    const proxy = wrapper.getCurrentComponent().proxy as typeof wrapper.setupState
+    const proxy = wrapper.getCurrentComponent().proxy as unknown as typeof wrapper.setupState
 
     expect(proxy.disabled.value).toBe(false)
     expect(proxy.getValue()).toBe('')

src/browser/pure.ts

@@ -32,14 +32,14 @@ function ensureTestIdAttribute(element: HTMLElement) {
   }
 }
 
-export interface RenderResult<Props> extends LocatorSelectors {
+export interface RenderResult<Props, T = unknown> extends LocatorSelectors {
   container: HTMLElement
   baseElement: HTMLElement
   locator: Locator
   /**
    * The return value of the component setup, mocked when the `spy` option is enabled.
    */
-  setupState: SetupState
+  setupState: SetupState<T>
   debug(
     el?: HTMLElement | HTMLElement[] | Locator | Locator[],
     maxLength?: number, options?:
@@ -81,7 +81,7 @@ export interface RenderResult<Props> extends LocatorSelectors {
 export async function render<T>(
   component: T,
   options: WrapperOptions<T> = {},
-): Promise<RenderResult<ComponentProps<T>>> {
+): Promise<RenderResult<ComponentProps<T>, T>> {
   const {
     container,
     baseElement,
@@ -93,7 +93,7 @@ export async function render<T>(
 
   const { debug, getElementLocatorSelectors } = utils
 
-  const renderResult: RenderResult<ComponentProps<T>> = {
+  const renderResult: RenderResult<ComponentProps<T>, T> = {
     container,
     baseElement,
     locator: page.elementLocator(container),

src/runtime-utils/mount.ts

@@ -4,7 +4,7 @@ import type { WrapperSuspendedOptions, WrapperSuspendedResult } from './utils/su
 
 type WrapperFn<C> = typeof wrapperFn<C>
 type WrapperOptions<C> = WrapperSuspendedOptions<WrapperFn<C>>
-type WrapperResult<C> = WrapperSuspendedResult<WrapperFn<C>>
+type WrapperResult<C> = WrapperSuspendedResult<WrapperFn<C>, C>
 
 /**
  * `mountSuspended` allows you to mount any vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example:

src/runtime-utils/render.ts

@@ -5,7 +5,7 @@ import type { render } from '@testing-library/vue'
 
 type WrapperFn<C> = typeof render<C>
 type WrapperOptions<C> = WrapperSuspendedOptions<WrapperFn<C>>
-type WrapperResult<C> = WrapperSuspendedResult<WrapperFn<C>>
+type WrapperResult<C> = WrapperSuspendedResult<WrapperFn<C>, C>
 
 /**
  * `renderSuspended` allows you to mount any vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins.

src/runtime-utils/utils/suspended.ts

@@ -1,6 +1,6 @@
 import { vi } from 'vitest'
 import { Suspense, effectScope, h, nextTick, reactive, getCurrentInstance, onErrorCaptured } from 'vue'
-import type { App, ComponentInternalInstance, DefineComponent, SetupContext, VNode } from 'vue'
+import type { App, ComponentInternalInstance, DefineComponent, RenderFunction, SetupContext, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { ComponentMountingOptions } from '@vue/test-utils'
 
@@ -9,9 +9,20 @@ import NuxtRoot from '#build/root-component.mjs'
 
 import { RouterLink } from '../components/RouterLink.ts'
 
-// TODO: improve return types
+// TODO: improve return types for sfc component's non-exposed states
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type SetupState = Record<string, any>
+type AnySetupState = Record<string, any>
+
+type DefinedSetupFunction<C> = C extends { setup?: (...args: infer _) => infer R }
+  ? Exclude<Awaited<R>, void | RenderFunction>
+  : never
+
+type DefinedSetupState<C, R = DefinedSetupFunction<C>> = [R] extends [never]
+  ? AnySetupState
+  : R
+
+export type SetupState<C = unknown> = DefinedSetupState<C> & AnySetupState
 
 type BaseOptions<C> = Pick<ComponentMountingOptions<C>, 'global'>
 
@@ -59,11 +70,11 @@ export type WrapperSuspendedAdditionalOptions = {
 
 export type WrapperSuspendedOptions<Fn> = WrapperFnOption<Fn> & WrapperSuspendedAdditionalOptions
 
-export type WrapperSuspendedResult<Fn> = WrapperFnResult<Fn> & {
+export type WrapperSuspendedResult<Fn, C> = WrapperFnResult<Fn> & {
   /**
    * The return value of the component setup.
    */
-  setupState: SetupState
+  setupState: SetupState<C>
 }
 
 export function cleanupAll() {
@@ -115,7 +126,7 @@ export function wrapperSuspended<
     stubRouterLink?: boolean
   },
 ): Promise<{
-  wrapper: WrapperSuspendedResult<Fn>
+  wrapper: WrapperSuspendedResult<Fn, C>
   setProps: (props: object) => void
   /**
    * Stop only the effect scopes created by this call, leaving those of other mounted components
@@ -150,7 +161,7 @@ export function wrapperSuspended<
 
   let wrappedInstance: ComponentInternalInstance | null = null
   let setupContext: SetupContext
-  let setupState: SetupState = {}
+  let setupState = {}
 
   const setProps = reactive<Record<string, unknown>>({})
 
@@ -256,7 +267,7 @@ export function wrapperSuspended<
                 if (isMountSettled) return
                 isMountSettled = true
 
-                wrapper.setupState = setupState
+                wrapper.setupState = setupState as SetupState<C>
 
                 resolve({
                   wrapper,
@@ -293,7 +304,7 @@ export function wrapperSuspended<
           },
         }),
       },
-    ) as WrapperSuspendedResult<Fn>
+    ) as WrapperSuspendedResult<Fn, C>
   })
 }
 

test/types/mount-render-helpers.test-d.ts

@@ -32,8 +32,15 @@ const Component = defineComponent({
   emits: ['update:modelValue'],
   expose: ['method'],
   setup: () => {
+    const message = ref('message')
+    const number = ref(0)
+    const object = ref({ a: 1, b: new Date(), c: true as boolean | undefined })
     return {
-      method: () => '',
+      message,
+      number,
+      object,
+      method: () => message.value,
+      method2: (v: number) => number.value + v,
     }
   },
 })
@@ -44,13 +51,39 @@ type SuspendedAdditionalOptions = {
   scoped?: boolean
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnySetupState = Record<string, any>
+
 type SuspendedAdditionalResult = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setupState: Record<string, any>
+  setupState: {
+    message: Ref<string>
+    number: Ref<number>
+    object: Ref<{ a: number, b: Date, c: boolean | undefined }>
+    method: () => string
+    method2: (v: number) => number
+  } & AnySetupState
 }
 
 type ComponentType = typeof Component
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const AsyncSetupComponent = defineComponent({
+  async setup() {
+    const message = ref('message')
+    await Promise.resolve()
+    return {
+      message,
+      method: () => message.value,
+    }
+  },
+})
+
+type AsyncSetupComponentType = typeof AsyncSetupComponent
+type AsyncSetupState = {
+  message: Ref<string>
+  method: () => string
+} & AnySetupState
+
 describe('mountSuspended', () => {
   describe('options', () => {
     type Options = NonNullable<Parameters<typeof mountSuspended<ComponentType>>[1]>
@@ -88,6 +121,11 @@ describe('mountSuspended', () => {
       expectTypeOf<Pick<Result, keyof VueWrapper>>()
         .toEqualTypeOf<Pick<VueWrapper, keyof VueWrapper>>()
     })
+
+    it('has async setup setupState', () => {
+      type AsyncResult = Awaited<ReturnType<typeof mountSuspended<AsyncSetupComponentType>>>
+      expectTypeOf<AsyncResult['setupState']>().toEqualTypeOf<AsyncSetupState>()
+    })
   })
 })
 
@@ -129,6 +167,11 @@ describe('renderSuspended', () => {
       expectTypeOf<Pick<Result, keyof RenderResult>>()
         .toEqualTypeOf<Pick<RenderResult, keyof RenderResult>>()
     })
+
+    it('has async setup setupState', () => {
+      type AsyncResult = Awaited<ReturnType<typeof renderSuspended<AsyncSetupComponentType>>>
+      expectTypeOf<AsyncResult['setupState']>().toEqualTypeOf<AsyncSetupState>()
+    })
   })
 })
 
@@ -179,6 +222,11 @@ describe('browser.render', () => {
       expectTypeOf<Pick<Result, keyof LocatorSelectors>>()
         .toEqualTypeOf<Pick<LocatorSelectors, keyof LocatorSelectors>>()
     })
+
+    it('has async setup setupState', () => {
+      type AsyncResult = Awaited<ReturnType<typeof render<AsyncSetupComponentType>>>
+      expectTypeOf<AsyncResult['setupState']>().toEqualTypeOf<AsyncSetupState>()
+    })
   })
 
   describe('browser.page', () => {