fix(runtime-utils): setProps can replace array prop

examples/app-vitest-full/components/ExportDefaultComponent.vue

@@ -3,6 +3,11 @@
     <h1>ExportDefaultComponent</h1>
     <pre>{{ myProp }}</pre>
     <pre>{{ setupMyProp }}</pre>
+    <span
+      v-for="item in myArrayProp"
+      :key="item"
+    >{{ item }}
+    </span>
   </div>
 </template>
 
@@ -22,6 +27,10 @@ export default {
       type: String,
       required: true,
     },
+    myArrayProp: {
+      type: Array as PropType<string[]>,
+      default: () => ([]),
+    },
   },
   setup(props) {
     return {

examples/app-vitest-full/components/ExportDefaultReturnsRenderComponent.vue

@@ -5,13 +5,18 @@ export default {
       type: String,
       required: true,
     },
+    myArrayProp: {
+      type: Array as PropType<string[]>,
+      default: () => ([]),
+    },
   },
   setup(props) {
     const pre = 'X' + props.myProp
     return () => h('div', [
       h('h1', 'ExportDefaultReturnsRenderComponent'),
       h('pre', props.myProp),
       h('pre', pre),
+      props.myArrayProp.map(item => h('span', item)),
     ])
   },
 }

examples/app-vitest-full/components/ExportDefaultWithRenderComponent.vue

@@ -5,6 +5,10 @@ export default {
       type: String,
       required: true,
     },
+    myArrayProp: {
+      type: Array as PropType<string[]>,
+      default: () => ([]),
+    },
   },
   setup(props) {
     return {
@@ -16,6 +20,7 @@ export default {
       h('h1', 'ExportDefaultWithRenderComponent'),
       h('pre', this.myProp),
       h('pre', this.setupMyProp),
+      this.myArrayProp.map(item => h('span', item)),
     ])
   },
 }

examples/app-vitest-full/components/ExportDefineComponent.vue

@@ -3,6 +3,10 @@
     <h1>ExportDefineComponent</h1>
     <pre>{{ myProp }}</pre>
     <pre>{{ setupMyProp }}</pre>
+    <span
+      v-for="item in myArrayProp"
+      :key="item"
+    >{{ item }}</span>
   </div>
 </template>
 
@@ -22,6 +26,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    myArrayProp: {
+      type: Array as PropType<string[]>,
+      default: () => ([]),
+    },
   },
   setup(props) {
     return {

examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts

@@ -126,14 +126,15 @@ describe.each(Object.entries(formats))(`%s`, (name, component) => {
     wrapper = await mountSuspended(component, {
       props: {
         myProp: 'Hello nuxt-vitest',
+        myArrayProp: ['hello', 'nuxt', 'vitest'],
       },
     })
   })
 
   it('mounts with props', () => {
     expect(wrapper.html()).toEqual(`
 <div>
-  <h1>${name}</h1><pre>Hello nuxt-vitest</pre><pre>XHello nuxt-vitest</pre>
+  <h1>${name}</h1><pre>Hello nuxt-vitest</pre><pre>XHello nuxt-vitest</pre><span>hello</span><span>nuxt</span><span>vitest</span>
 </div>
     `.trim())
   })
@@ -144,7 +145,19 @@ describe.each(Object.entries(formats))(`%s`, (name, component) => {
     })
     expect(wrapper.html()).toEqual(`
 <div>
-  <h1>${name}</h1><pre>updated title</pre><pre>XHello nuxt-vitest</pre>
+  <h1>${name}</h1><pre>updated title</pre><pre>XHello nuxt-vitest</pre><span>hello</span><span>nuxt</span><span>vitest</span>
+</div>
+    `.trim())
+  })
+
+  it('can be updated array with setProps', async () => {
+    await wrapper.setProps({
+      myProp: 'updated title',
+      myArrayProp: ['updated', 'prop'],
+    })
+    expect(wrapper.html()).toEqual(`
+<div>
+  <h1>${name}</h1><pre>updated title</pre><pre>XHello nuxt-vitest</pre><span>updated</span><span>prop</span>
 </div>
     `.trim())
   })

src/runtime-utils/mount.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import type { ComponentMountingOptions } from '@vue/test-utils'
 import { Suspense, h, isReadonly, nextTick, reactive, unref } from 'vue'
 import type { DefineComponent, SetupContext } from 'vue'
-import { defu } from 'defu'
+import { defu, createDefu } from 'defu'
 import type { RouteLocationRaw } from 'vue-router'
 
 import { RouterLink } from './components/RouterLink'
@@ -134,7 +134,7 @@ export async function mountSuspended<T>(
                         setup: setup ? (props: Record<string, unknown>) => wrappedSetup(props, setupContext) : undefined,
                       }
 
-                      return () => h(clonedComponent, { ...defu(setProps, props) as typeof props, ...attrs }, slots)
+                      return () => h(clonedComponent, { ...defuReplaceArray(setProps, props) as typeof props, ...attrs }, slots)
                     },
                   }),
               },
@@ -167,3 +167,10 @@ interface AugmentedVueInstance {
   setupState?: Record<string, unknown>
   __setProps?: (props: Record<string, unknown>) => void
 }
+
+const defuReplaceArray = createDefu((obj, key, value) => {
+  if (Array.isArray(obj[key])) {
+    obj[key] = value
+    return true
+  }
+})