diff --git a/examples/app-vitest-full/components/WrapperElement.vue b/examples/app-vitest-full/components/WrapperElement.vue new file mode 100644 index 000000000..cb788d0b5 --- /dev/null +++ b/examples/app-vitest-full/components/WrapperElement.vue @@ -0,0 +1,12 @@ + + + diff --git a/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts b/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts index 6604b1a3a..266452c4c 100644 --- a/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts +++ b/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(`"
Link with string to prop Link with object to prop
"`) }) + +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') +}) diff --git a/src/runtime-utils/mount.ts b/src/runtime-utils/mount.ts index a2dd2e4e4..80b5dd98d 100644 --- a/src/runtime-utils/mount.ts +++ b/src/runtime-utils/mount.ts @@ -96,13 +96,7 @@ export async function mountSuspended( (vm as unknown as AugmentedVueInstance).__setProps = (props: Record) => { 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> & { setupState: Record }) + resolve(wrappedMountedWrapper(vm as ReturnType> & { setupState: Record })) }), }, { @@ -214,3 +208,28 @@ function cloneProps(props: Record) { } return newProps } + +function wrappedMountedWrapper(wrapper: ReturnType> & { setupState: Record }) { + 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 +}