fix(runtime-utils): define $attrs in component render context (#1108)

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

@@ -0,0 +1,9 @@
+<template>
+  <span v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+</script>

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

@@ -14,6 +14,7 @@ import ExportDefineComponent from '~/components/ExportDefineComponent.vue'
 import ExportDefaultWithRenderComponent from '~/components/ExportDefaultWithRenderComponent.vue'
 import ExportDefaultReturnsRenderComponent from '~/components/ExportDefaultReturnsRenderComponent.vue'
 import OptionsApiPage from '~/pages/other/options-api.vue'
+import ComponentWithAttrs from '~/components/ComponentWithAttrs.vue'
 import ComponentWithReservedProp from '~/components/ComponentWithReservedProp.vue'
 import ComponentWithReservedState from '~/components/ComponentWithReservedState.vue'
 import ComponentWithImports from '~/components/ComponentWithImports.vue'
@@ -159,6 +160,11 @@ describe('mountSuspended', () => {
     expect(span.text()).toBe('false')
   })
 
+  it('should define $attrs', async () => {
+    const component = await mountSuspended(ComponentWithAttrs, { attrs: { foo: 'bar' } })
+    expect(component.find('[foo="bar"]').exists()).toBe(true)
+  })
+
   describe('Options API', () => {
     beforeEach(() => {
       vi.spyOn(console, 'error').mockImplementation((message) => {

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) => {

src/runtime-utils/mount.ts

@@ -182,6 +182,7 @@ export async function mountSuspended<T>(
           _options,
           {
             slots,
+            attrs,
             global: {
               config: {
                 globalProperties: vueApp.config.globalProperties,

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,7 @@ export async function renderSuspended<T>(component: T, options?: RenderOptions<T
       },
       defu(_options, {
         slots,
+        attrs,
         global: {
           config: {
             globalProperties: vueApp.config.globalProperties,