From 5a265373b6b6a01ab4af00a7eb509915d707cd63 Mon Sep 17 00:00:00 2001
From: freakzlike <freakzlike@gmail.com>
Date: Sun, 17 Apr 2022 10:31:32 +0200
Subject: [PATCH] fix: forward Ref prop on mount

---
 src/mount.ts        |  4 ++--
 tests/props.spec.ts | 27 ++++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/mount.ts b/src/mount.ts
index 1d0965c8c..483c8b2c7 100644
--- a/src/mount.ts
+++ b/src/mount.ts
@@ -2,7 +2,7 @@ import {
   h,
   createApp,
   defineComponent,
-  reactive,
+  shallowReactive,
   FunctionalComponent,
   ComponentPublicInstance,
   ComponentOptionsWithObjectProps,
@@ -379,7 +379,7 @@ export function mount(
   const MOUNT_COMPONENT_REF = 'VTU_COMPONENT'
   // we define props as reactive so that way when we update them with `setProps`
   // Vue's reactivity system will cause a rerender.
-  const props = reactive({
+  const props = shallowReactive({
     ...options?.attrs,
     ...options?.propsData,
     ...options?.props,
diff --git a/tests/props.spec.ts b/tests/props.spec.ts
index 46843ca4c..37f3b671f 100644
--- a/tests/props.spec.ts
+++ b/tests/props.spec.ts
@@ -2,7 +2,7 @@ import { mount, shallowMount } from '../src'
 import WithProps from './components/WithProps.vue'
 import PropWithSymbol from './components/PropWithSymbol.vue'
 import Hello from './components/Hello.vue'
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, isRef, ref } from 'vue'
 import Title from './components/FunctionComponent'
 
 describe('props', () => {
@@ -157,6 +157,31 @@ describe('props', () => {
     expect(wrapper.find('#foo2').attributes().foo).toBe('foo2 value')
   })
 
+  it('should forward ref as raw prop', () => {
+    const TestComponent = defineComponent({
+      props: {
+        refProp: {
+          type: [Object],
+          required: true
+        }
+      },
+      setup(props) {
+        return () =>
+          h('div', [
+            h('h1', isRef(props.refProp) ? 'is ref' : 'is not ref'),
+            h('span', props.refProp.value)
+          ])
+      }
+    })
+
+    const refProp = ref('Some value')
+    const wrapper = mount(TestComponent, {
+      props: { refProp }
+    })
+    expect(wrapper.find('h1').text()).toBe('is ref')
+    expect(wrapper.find('span').text()).toBe('Some value')
+  })
+
   it('returns reactive props on a stubbed component shallow case', async () => {
     const Foo = {
       name: 'Foo',