fix: add proxy wrapper.element

examples/app-vitest-full/components/WrapperElement.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  as: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="as"
+    v-bind="$attrs"
+  />
+</template>

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

@@ -21,6 +21,7 @@ import ComponentWithImports from '~/components/ComponentWithImports.vue'
 import { BoundAttrs } from '#components'
 import DirectiveComponent from '~/components/DirectiveComponent.vue'
 import CustomComponent from '~/components/CustomComponent.vue'
+import WrapperElement from '~/components/WrapperElement.vue'
 
 const formats = {
   ExportDefaultComponent,
@@ -297,3 +298,13 @@ it('renders links correctly', async () => {
 
   expect(component.html()).toMatchInlineSnapshot(`"<div><a href="/test"> Link with string to prop </a><a href="/test"> Link with object to prop </a></div>"`)
 })
+
+it('element should be changed', async () => {
+  const component = await mountSuspended(WrapperElement, { props: { as: 'div' } })
+
+  expect(component.element.tagName).toBe('DIV')
+
+  await component.setProps({ as: 'span' })
+
+  expect(component.element.tagName).toBe('SPAN')
+})

src/runtime-utils/mount.ts

@@ -96,13 +96,7 @@ export async function mountSuspended<T>(
                     (vm as unknown as AugmentedVueInstance).__setProps = (props: Record<string, unknown>) => {
                       Object.assign(setProps, props)
                     }
-                    vm.props = new Proxy(vm.props, {
-                      apply: (target, thisValue, args) => {
-                        const component = thisValue.findComponent({ name: 'MountSuspendedComponent' })
-                        return component.props(...args)
-                      },
-                    })
-                    resolve(vm as ReturnType<typeof mount<T>> & { setupState: Record<string, unknown> })
+                    resolve(wrappedMountedWrapper(vm as ReturnType<typeof mount<T>> & { setupState: Record<string, unknown> }))
                   }),
               },
               {
@@ -214,3 +208,28 @@ function cloneProps(props: Record<string, unknown>) {
   }
   return newProps
 }
+
+function wrappedMountedWrapper<T>(wrapper: ReturnType<typeof mount<T>> & { setupState: Record<string, unknown> }) {
+  const proxy = new Proxy(wrapper, {
+    get: (target, prop, receiver) => {
+      if (prop === 'element') {
+        const component = target.findComponent({ name: 'MountSuspendedComponent' })
+        return component[prop]
+      }
+      else {
+        return Reflect.get(target, prop, receiver)
+      }
+    },
+  })
+
+  for (const key of ['props'] as const) {
+    proxy[key] = new Proxy(wrapper[key], {
+      apply: (target, thisArg, args) => {
+        const component = thisArg.findComponent({ name: 'MountSuspendedComponent' })
+        return component[key](...args)
+      },
+    })
+  }
+
+  return proxy
+}