From 2f76aba4b80e29a645b7adc473d1599c3806f747 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sat, 1 Feb 2025 12:34:45 +0100
Subject: [PATCH] fix(renderSuspended): define `$attrs` in component render
 context

---
 .../tests/nuxt/render-suspended.spec.ts             |  8 ++++++++
 src/runtime-utils/render.ts                         | 13 ++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts b/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts
index 58f75ecd1..3e1857b98 100644
--- a/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts
+++ b/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts
@@ -11,6 +11,7 @@ import DirectiveComponent from '~/components/DirectiveComponent.vue'
 
 import ExportDefaultComponent from '~/components/ExportDefaultComponent.vue'
 import ExportDefineComponent from '~/components/ExportDefineComponent.vue'
+import ComponentWithAttrs from '~/components/ComponentWithAttrs.vue'
 import ExportDefaultWithRenderComponent from '~/components/ExportDefaultWithRenderComponent.vue'
 import ExportDefaultReturnsRenderComponent from '~/components/ExportDefaultReturnsRenderComponent.vue'
 import OptionsApiPage from '~/pages/other/options-api.vue'
@@ -126,6 +127,13 @@ describe('renderSuspended', () => {
     `)
   })
 
+  it('should define $attrs', async () => {
+    const { html } = await renderSuspended(ComponentWithAttrs, { attrs: { foo: 'bar' } })
+    expect(html()).toMatchInlineSnapshot(`
+      "<div id="test-wrapper"><span foo="bar"></span></div>"
+    `)
+  })
+
   describe('Options API', () => {
     beforeEach(() => {
       vi.spyOn(console, 'error').mockImplementation((message) => {
diff --git a/src/runtime-utils/render.ts b/src/runtime-utils/render.ts
index d8cadb3da..1a66821a8 100644
--- a/src/runtime-utils/render.ts
+++ b/src/runtime-utils/render.ts
@@ -1,4 +1,4 @@
-import { Suspense, effectScope, h, nextTick, isReadonly, reactive, unref } from 'vue'
+import { Suspense, effectScope, h, nextTick, isReadonly, reactive, unref, defineComponent } from 'vue'
 import type { DefineComponent, SetupContext } from 'vue'
 import type { RenderOptions as TestingLibraryRenderOptions } from '@testing-library/vue'
 import { defu } from 'defu'
@@ -85,6 +85,12 @@ export async function renderSuspended<T>(component: T, options?: RenderOptions<T
     }
   }
 
+  const WrapperComponent = defineComponent({
+    inheritAttrs: false,
+    render() {
+      return h('div', { id: WRAPPER_EL_ID }, this.$slots.default?.())
+    },
+  })
   return new Promise<ReturnType<typeof renderFromTestingLibrary> & { setupState: SetupState }>((resolve) => {
     const utils = renderFromTestingLibrary(
       {
@@ -108,8 +114,7 @@ export async function renderSuspended<T>(component: T, options?: RenderOptions<T
           // we add this additional root element because otherwise testing-library breaks
           // because there's no root element while Suspense is resolving
           h(
-            'div',
-            { id: WRAPPER_EL_ID },
+            WrapperComponent,
             h(
               Suspense,
               {
@@ -190,6 +195,8 @@ export async function renderSuspended<T>(component: T, options?: RenderOptions<T
       },
       defu(_options, {
         slots,
+        attrs,
+        inheritAttrs: false,
         global: {
           config: {
             globalProperties: vueApp.config.globalProperties,