feat: enhance resolveElement to support async components in non-children props

Author: aurorascharff

src/__tests__/renderAsync.js

@@ -209,6 +209,57 @@ describe('renderAsync', () => {
     expect(screen.getByTestId('child')).toHaveTextContent('Child Content')
   })
 
+  test('resolves async components passed as non-children props', async () => {
+    async function AsyncSidebar() {
+      return <nav data-testid="async-sidebar">Sidebar Content</nav>
+    }
+
+    async function AsyncHeader() {
+      return <header data-testid="async-header">Header Content</header>
+    }
+
+    function Layout({sidebar, header, children}) {
+      return (
+        <div data-testid="layout">
+          {header}
+          <aside>{sidebar}</aside>
+          <main>{children}</main>
+        </div>
+      )
+    }
+
+    await renderAsync(
+      <Layout sidebar={<AsyncSidebar />} header={<AsyncHeader />}>
+        <div data-testid="main-content">Main</div>
+      </Layout>,
+    )
+    expect(screen.getByTestId('layout')).toBeInTheDocument()
+    expect(screen.getByTestId('async-sidebar')).toHaveTextContent(
+      'Sidebar Content',
+    )
+    expect(screen.getByTestId('async-header')).toHaveTextContent(
+      'Header Content',
+    )
+    expect(screen.getByTestId('main-content')).toHaveTextContent('Main')
+  })
+
+  test('resolves async component in Suspense fallback prop', async () => {
+    async function AsyncFallback() {
+      return <div data-testid="resolved-fallback">Resolved Fallback</div>
+    }
+
+    function SyncContent() {
+      return <div data-testid="content">Content</div>
+    }
+
+    await renderAsync(
+      <React.Suspense fallback={<AsyncFallback />}>
+        <SyncContent />
+      </React.Suspense>,
+    )
+    expect(screen.getByTestId('content')).toHaveTextContent('Content')
+  })
+
   test('returns standard render result properties', async () => {
     const {container, baseElement, debug, unmount, asFragment} =
       await renderAsync(<AsyncHelloWorld />)

src/pure.js

@@ -325,13 +325,16 @@ function isAsyncFunction(fn) {
 // in the element tree before passing to React's client-side renderer.
 // This replicates the implicit use() behavior that React's server renderer
 // provides for async components but which the client renderer does not support.
+// Walks all props (not just children) so async components passed as e.g.
+// sidebar, fallback, or header props are also resolved.
 async function resolveElement(element) {
   if (element == null || typeof element !== 'object') {
     return element
   }
 
   if (Array.isArray(element)) {
-    return Promise.all(element.map(resolveElement))
+    const resolved = await Promise.all(element.map(resolveElement))
+    return resolved.some((r, i) => r !== element[i]) ? resolved : element
   }
 
   if (!React.isValidElement(element)) {
@@ -343,21 +346,64 @@ async function resolveElement(element) {
     return resolveElement(resolved)
   }
 
-  const children = element.props?.children
-  if (children == null) {
+  return resolveElementProps(element)
+}
+
+async function resolveElementProps(element) {
+  const props = element.props
+  if (props == null) {
     return element
   }
 
-  const resolvedChildren = await resolveElement(children)
+  let propsChanged = false
+  let childrenChanged = false
+  const newProps = {}
+  let resolvedChildren
+
+  for (const key of Object.keys(props)) {
+    const value = props[key]
+
+    if (key === 'children') {
+      resolvedChildren = await resolveElement(value)
+      childrenChanged = resolvedChildren !== value
+      continue
+    }
+
+    // Only resolve values that are React elements to avoid inadvertently
+    // awaiting Promise-valued props (e.g. dataPromise for use())
+    if (React.isValidElement(value)) {
+      const resolved = await resolveElement(value)
+      newProps[key] = resolved
+      if (resolved !== value) {
+        propsChanged = true
+      }
+    } else {
+      newProps[key] = value
+    }
+  }
 
-  if (resolvedChildren === children) {
+  if (!propsChanged && !childrenChanged) {
     return element
   }
 
-  if (Array.isArray(resolvedChildren)) {
-    return React.cloneElement(element, undefined, ...resolvedChildren)
+  // Spread children as separate arguments to cloneElement to preserve
+  // positional identity and avoid "missing key" warnings
+  if (childrenChanged) {
+    if (Array.isArray(resolvedChildren)) {
+      return React.cloneElement(
+        element,
+        propsChanged ? newProps : undefined,
+        ...resolvedChildren,
+      )
+    }
+    return React.cloneElement(
+      element,
+      propsChanged ? newProps : undefined,
+      resolvedChildren,
+    )
   }
-  return React.cloneElement(element, undefined, resolvedChildren)
+
+  return React.cloneElement(element, newProps)
 }
 
 async function renderAsync(ui, options) {