regression: #1476 reactive prop object compare (#1479)

* chore: Add regression tests for #1476

* fix: reactive props and keep refs

* chore: fix type compile error on test component

Author: freakzlike

src/mount.ts

@@ -2,7 +2,9 @@ import {
   h,
   createApp,
   defineComponent,
+  reactive,
   shallowReactive,
+  isRef,
   FunctionalComponent,
   ComponentPublicInstance,
   ComponentOptionsWithObjectProps,
@@ -379,12 +381,22 @@ 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 = shallowReactive({
+  const refs = shallowReactive<Record<string, unknown>>({})
+  const props = reactive<Record<string, unknown>>({})
+
+  Object.entries({
     ...options?.attrs,
     ...options?.propsData,
     ...options?.props,
     ref: MOUNT_COMPONENT_REF
+  }).forEach(([k, v]) => {
+    if (isRef(v)) {
+      refs[k] = v
+    } else {
+      props[k] = v
+    }
   })
+
   const global = mergeGlobalProperties(options?.global)
   if (isObjectComponent(component)) {
     component.components = { ...component.components, ...global.components }
@@ -394,7 +406,7 @@ export function mount(
   const Parent = defineComponent({
     name: 'VTU_ROOT',
     render() {
-      return h(component, props, slots)
+      return h(component as ComponentOptions, { ...props, ...refs }, slots)
     }
   })
 

tests/components/Issue1476.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <template v-for="field of availableFields" :key="field.name">
+      <button class="field" @click="selectedField = field">
+        {{ field.name }}
+      </button>
+      <div
+        v-if="selectedField === field"
+        class="selectedField"
+      >
+        {{ field.name }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    availableFields: { type: Array, required: true }
+  },
+  data: () => ({
+    selectedField: ''
+  })
+}
+</script>

tests/props.spec.ts

@@ -4,6 +4,7 @@ import PropWithSymbol from './components/PropWithSymbol.vue'
 import Hello from './components/Hello.vue'
 import { defineComponent, h, isRef, ref } from 'vue'
 import Title from './components/FunctionComponent'
+import Issue1476 from './components/Issue1476.vue'
 
 describe('props', () => {
   it('returns a single prop applied to a component', () => {
@@ -182,6 +183,27 @@ describe('props', () => {
     expect(wrapper.find('span').text()).toBe('Some value')
   })
 
+  it('should keep props as same object', async () => {
+    // https://github.com/vuejs/test-utils/issues/1476
+    const wrapper = mount(Issue1476, {
+      props: {
+        availableFields: [{ name: 'Animals' }, { name: 'Cities' }]
+      }
+    })
+
+    expect(wrapper.find('.subField').exists()).toBe(false)
+
+    await wrapper.findAll('.field')[0].trigger('click')
+
+    expect(wrapper.find('.selectedField').exists()).toBe(true)
+    expect(wrapper.find('.selectedField').text()).toBe('Animals')
+
+    await wrapper.findAll('.field')[1].trigger('click')
+
+    expect(wrapper.find('.selectedField').exists()).toBe(true)
+    expect(wrapper.find('.selectedField').text()).toBe('Cities')
+  })
+
   it('returns reactive props on a stubbed component shallow case', async () => {
     const Foo = {
       name: 'Foo',