diff --git a/src/mount.ts b/src/mount.ts index 31ddda39dc..d75b0ba54c 100644 --- a/src/mount.ts +++ b/src/mount.ts @@ -25,7 +25,8 @@ import { ComponentOptions, ConcreteComponent, Prop, - transformVNodeArgs + transformVNodeArgs, + ref } from 'vue' import { MountingOptions, Slot } from './types' @@ -432,9 +433,15 @@ export function mount( component.components = { ...component.components, ...global.components } } + const componentRef = ref(null) // create the wrapper component const Parent = defineComponent({ name: 'VTU_ROOT', + setup() { + return { + [MOUNT_COMPONENT_REF]: componentRef + } + }, render() { return h(component as ComponentOptions, { ...props, ...refs }, slots) } @@ -565,7 +572,7 @@ export function mount( const warnSave = console.warn console.warn = () => {} - const appRef = vm.$refs[MOUNT_COMPONENT_REF] as ComponentPublicInstance + const appRef = componentRef.value! as ComponentPublicInstance // we add `hasOwnProperty` so Jest can spy on the proxied vm without throwing // note that this is not necessary with Jest v27+ or Vitest, but is kept for compatibility with older Jest versions appRef.hasOwnProperty = (property) => { diff --git a/tests/shallowMount.spec.ts b/tests/shallowMount.spec.ts index a852cbca1b..5adc1e4abf 100644 --- a/tests/shallowMount.spec.ts +++ b/tests/shallowMount.spec.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest' -import { defineAsyncComponent, defineComponent } from 'vue' +import { defineAsyncComponent, defineComponent, onMounted } from 'vue' import { mount, shallowMount, VueWrapper } from '../src' import ComponentWithChildren from './components/ComponentWithChildren.vue' import ScriptSetupWithChildren from './components/ScriptSetupWithChildren.vue'