From e45401cb0475829a7fb03c825179a7b271948f80 Mon Sep 17 00:00:00 2001
From: ced <cedric@ninja-squad.com>
Date: Mon, 14 Nov 2022 16:56:31 +0100
Subject: [PATCH] fix: expose props on vm for script setup components

Fixes #1863

It turns out `vm` is not enough, and we need to proxy to `vm.$.ctx` which contains the props as well.
---
 src/vueWrapper.ts                         |  4 +++-
 tests/components/ScriptSetupWithProps.vue | 13 +++++++++++++
 tests/expose.spec.ts                      | 15 +++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 tests/components/ScriptSetupWithProps.vue

diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts
index 3ecd81263f..dc5981d0a0 100644
--- a/src/vueWrapper.ts
+++ b/src/vueWrapper.ts
@@ -35,7 +35,9 @@ function createVMProxy<T extends ComponentPublicInstance>(
       if (key in setupState) {
         return Reflect.get(setupState, key, receiver)
       } else {
-        return (vm as any)[key]
+        // vm.$.ctx is the internal context of the vm
+        // with all variables, methods and props
+        return (vm as any).$.ctx[key]
       }
     },
     set(vm, key, value, receiver) {
diff --git a/tests/components/ScriptSetupWithProps.vue b/tests/components/ScriptSetupWithProps.vue
new file mode 100644
index 0000000000..8a2b1c09f9
--- /dev/null
+++ b/tests/components/ScriptSetupWithProps.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{ count: number }>()
+const internalCount = ref(props.count);
+const inc = () => {
+  internalCount.value++
+}
+</script>
+
+<template>
+  <button @click="inc">{{ internalCount }}</button>
+</template>
diff --git a/tests/expose.spec.ts b/tests/expose.spec.ts
index 2b09247bfb..e7954c8454 100644
--- a/tests/expose.spec.ts
+++ b/tests/expose.spec.ts
@@ -6,6 +6,7 @@ import DefineExpose from './components/DefineExpose.vue'
 import DefineExposeWithRenderFunction from './components/DefineExposeWithRenderFunction.vue'
 import ScriptSetupExpose from './components/ScriptSetup_Expose.vue'
 import ScriptSetup from './components/ScriptSetup.vue'
+import ScriptSetupWithProps from './components/ScriptSetupWithProps.vue'
 
 describe('expose', () => {
   it('access vm on simple components', async () => {
@@ -61,4 +62,18 @@ describe('expose', () => {
     await nextTick()
     expect(wrapper.html()).toContain('2')
   })
+
+  it('access props on vm with <script setup>', async () => {
+    const wrapper = mount(ScriptSetupWithProps, {
+      props: {
+        count: 2
+      }
+    })
+    // make sure that props are accessible on wrapper.vm
+    expect(wrapper.vm.count).toBe(2)
+    expect(wrapper.html()).toContain('2')
+
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.html()).toContain('3')
+  })
 })