fix(#2591): findComponent assign instance exposed properties to the vm

even when that instance does not have a templateRef?

Author: renatodeleao

src/vueWrapper.ts

@@ -22,13 +22,17 @@ import { ShapeFlags } from './utils/vueShared'
  */
 function createVMProxy<T extends ComponentPublicInstance>(
   vm: T,
-  setupState: Record<string, any>
+  setupState: Record<string, any>,
+  exposed: Record<string, any> | null
 ): T {
   return new Proxy(vm, {
     get(vm, key, receiver) {
       if (vm.$.exposed && vm.$.exposeProxy && key in vm.$.exposeProxy) {
         // first if the key is exposed
         return Reflect.get(vm.$.exposeProxy, key, receiver)
+      } else if (exposed && key in exposed) {
+        // first if the key is exposed
+        return Reflect.get(exposed, key, receiver)
       } else if (key in setupState) {
         // second if the key is acccessible from the setupState
         return Reflect.get(setupState, key, receiver)
@@ -107,11 +111,24 @@ export class VueWrapper<
     // if we return it as `vm`
     // This does not work for functional components though (as they have no vm)
     // or for components with a setup that returns a render function (as they have an empty proxy)
-    // in both cases, we return `vm` directly instead
+    // in both cases, we return `vm` directly instead.
+    //
+    // NOTE https://github.com/vuejs/test-utils/issues/2591
+    // I'm sry i'm not entirely sure why, but exposed properties — via expose/defineExpose
+    // are not assigned to the componentVM when the the `vm` argument provided
+    // to this constructor comes from `findComponent` — as in, not the original instance
+    // but already the proxied one. I first suspected that was by design of defineExpose
+    // but that doesn't explain why it works when finding a .vue component or
+    // vs it's bundled version, where the different is conversion of to a render
+    // function. Also i've noticed that sometimes we can get some exceptions in
+    // bundle code becuase render function is hoisted and exposed if properties
+    // are returned to template, they also become available in th einstance.
+    //
     if (hasSetupState(vm)) {
-      this.componentVM = createVMProxy<T>(vm, vm.$.setupState)
+      this.componentVM = createVMProxy<T>(vm, vm.$.setupState, vm.$.exposed)
     } else {
       this.componentVM = vm
+      Object.assign(this.componentVM, vm.$.exposed)
     }
     this.__setProps = setProps
 

tests/components/DefineExpose.vue

@@ -60,6 +60,7 @@ export default defineComponent({
     })
 
     return {
+      exposedMethod1,
       returnedState,
     }
   }

tests/components/DefineExposeBundled.ts

@@ -0,0 +1,82 @@
+// @ts-ignore
+import {
+  defineComponent,
+  ref,
+  openBlock,
+  createElementBlock,
+  Fragment,
+  createElementVNode,
+  toDisplayString
+} from 'vue'
+const exposedState1 = 'exposedState1'
+const exposedState2 = 'exposedState2'
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: 'Hello'
+  },
+  __name: 'DefineExposeScriptSetup',
+  setup(__props, { expose: __expose }) {
+    const exposedState2Getter = () => {
+      return exposedState2
+    }
+    const exposedRef = ref('exposedRef')
+    const exposedRefGetter = () => {
+      return exposedRef.value
+    }
+    const exposedMethod1 = () => {
+      return 'result of exposedMethod1'
+    }
+    const exposedMethod2 = () => {
+      return 'result of exposedMethod2'
+    }
+    const refNonExposed = ref('refNonExposed')
+    const refNonExposedGetter = () => {
+      return refNonExposed.value
+    }
+    const count = ref(0)
+    const inc = () => {
+      count.value++
+    }
+    const resetCount = () => {
+      count.value = 0
+    }
+    __expose({
+      exposeObjectLiteral: 'exposeObjectLiteral',
+      exposedState1,
+      exposedState2Alias: exposedState2,
+      exposedState2Getter,
+      exposedRef,
+      exposedRefGetter,
+      exposedMethod1,
+      exposedMethod2Alias: exposedMethod2,
+      count,
+      resetCount,
+      refNonExposedGetter
+    })
+    return (_ctx, _cache) => {
+      return (
+        openBlock(),
+        createElementBlock(
+          Fragment,
+          null,
+          [
+            createElementVNode(
+              'button',
+              { onClick: inc },
+              toDisplayString(count.value),
+              1
+            ),
+            createElementVNode(
+              'div',
+              { 'force-expose': exposedMethod1 },
+              toDisplayString(refNonExposed.value),
+              1
+            )
+          ],
+          64
+        )
+      )
+    }
+  }
+})
+export default _sfc_main

tests/components/DefineExposeWithRenderFunction.vue

@@ -33,7 +33,7 @@ export default defineComponent({
     expose({
       /* ------ Common Test Case ------ */
       exposeObjectLiteral: 'exposeObjectLiteral',
-  
+
       exposedState1,
       exposedState2Alias: exposedState2,
       exposedState2Getter,
@@ -46,7 +46,8 @@ export default defineComponent({
       /* ------ Common Test Case ------ */
     })
 
-    return () => [h('div', refUseByRenderFnButNotExposed.value)]
+    return () => [
+      h('div', refUseByRenderFnButNotExposed.value)]
   }
 })
 </script>

tests/components/FindComponentExposeRenderFunction.ts

@@ -0,0 +1,21 @@
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'FindComponentExposeRenderFunction',
+  props: {
+    someProp: String
+  },
+  setup(_, { expose }) {
+    const exposedFn = () => {
+      return 'exposedFnReturn'
+    }
+
+    expose({
+      exposedFn
+    })
+
+    return () => {
+      return h('div', 'Example')
+    }
+  }
+})

tests/components/FindComponentExposeScriptSetup.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>Example</div>
+</template>
+
+<script setup>
+const props = defineProps({
+  someProp: String,
+});
+
+const exposedFn = () => {
+  return 'exposedFnReturn';
+};
+
+defineExpose({
+  exposedFn,
+});
+</script>

tests/components/FindComponentExposeScriptSetupBundled.ts

@@ -0,0 +1,20 @@
+// @ts-ignore
+import { openBlock, createElementBlock } from 'vue'
+const _sfc_main = {
+  __name: 'FindComponentExposeScriptSetupBundled',
+  props: {
+    someProp: String
+  },
+  setup(__props, { expose: __expose }) {
+    const exposedFn = () => {
+      return 'exposedFnReturn'
+    }
+    __expose({
+      exposedFn
+    })
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock('div', null, 'Example')
+    }
+  }
+}
+export default _sfc_main

tests/components/FindComponentExposeTemplate.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>Example</div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'FindComponentExposeTemplate',
+  props: {
+    someProp: String,
+  },
+  setup(_, { expose }) {
+    const exposedFn = () => {
+      return 'exposedFnReturn';
+    };
+
+    expose({
+      exposedFn,
+    });
+
+    return {
+      oopsy: 1
+    };
+  }
+})
+</script>
+

tests/components/ScriptSetup_Expose.vue

@@ -60,6 +60,10 @@ defineExpose({
   resetCount,
   refNonExposedGetter,
 })
+
+defineOptions({
+  name: 'Hello',
+})
 </script>
 
 <template>