enhance resolveElement to handle async components in array-valued props

Author: aurorascharff

src/__tests__/renderAsync.js

@@ -260,6 +260,32 @@ describe('renderAsync', () => {
     expect(screen.getByTestId('content')).toHaveTextContent('Content')
   })
 
+  test('resolves async components in array-valued props', async () => {
+    async function AsyncTab({label}) {
+      return <li data-testid={`tab-${label}`}>{label}</li>
+    }
+
+    function SyncTab({label}) {
+      return <li data-testid={`tab-${label}`}>{label}</li>
+    }
+
+    function TabBar({tabs}) {
+      return <ul data-testid="tab-bar">{tabs}</ul>
+    }
+
+    await renderAsync(
+      <TabBar
+        tabs={[
+          <AsyncTab key="async" label="async" />,
+          <SyncTab key="sync" label="sync" />,
+        ]}
+      />,
+    )
+    expect(screen.getByTestId('tab-bar')).toBeInTheDocument()
+    expect(screen.getByTestId('tab-async')).toHaveTextContent('async')
+    expect(screen.getByTestId('tab-sync')).toHaveTextContent('sync')
+  })
+
   test('passes through non-element objects in children unchanged', async () => {
     function Container({children}) {
       return <div data-testid="container">{String(children)}</div>

src/pure.js

@@ -343,7 +343,11 @@ async function resolveElement(element) {
 
   if (typeof element.type === 'function' && isAsyncFunction(element.type)) {
     const resolved = await element.type({...element.props})
-    return resolveElement(resolved)
+    const resolvedElement = await resolveElement(resolved)
+    if (element.key != null && React.isValidElement(resolvedElement)) {
+      return React.cloneElement(resolvedElement, {key: element.key})
+    }
+    return resolvedElement
   }
 
   return resolveElementProps(element)
@@ -364,6 +368,12 @@ async function resolveElementProps(element) {
           changed: resolved !== value,
         }))
       }
+      if (Array.isArray(value) && value.some(React.isValidElement)) {
+        return resolveElement(value).then(resolved => ({
+          value: resolved,
+          changed: resolved !== value,
+        }))
+      }
       return {value, changed: false}
     }),
   )