From 3313381040f44cf8bc51b5589cb956ffa51c9b1a Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Sat, 28 Oct 2023 19:36:48 +0200
Subject: [PATCH] fix(ct): react render array as child (#27692)

Signed-off-by: Sander <info@mesander.com>
Co-authored-by: Dmitry Gozman <dgozman@gmail.com>
Co-authored-by: mbr <mbr@mbrs-MacBook-Air.local>
---
 .../playwright-ct-react/registerSource.mjs    | 26 +++++++++++--------
 .../playwright-ct-react17/registerSource.mjs  | 26 +++++++++++--------
 .../ct-react-vite/tests/children.spec.tsx     |  5 ++--
 .../ct-react17/tests/children.spec.tsx        |  5 ++--
 4 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/packages/playwright-ct-react/registerSource.mjs b/packages/playwright-ct-react/registerSource.mjs
index 76918b34fb..6231dae353 100644
--- a/packages/playwright-ct-react/registerSource.mjs
+++ b/packages/playwright-ct-react/registerSource.mjs
@@ -76,23 +76,27 @@ async function __pwResolveComponent(component) {
 }
 
 /**
- * @param {JsxComponent | JsxComponentChild} component
+ * @param {JsxComponentChild} child
+ */
+function __renderChild(child) {
+  if (Array.isArray(child))
+    return child.map(grandChild => __renderChild(grandChild));
+  if (isComponent(child))
+    return __pwRender(child);
+  return child;
+}
+
+/**
+ * @param {JsxComponent} component
  */
 function __pwRender(component) {
-  if (!isComponent(component))
-    return component;
-
   const componentFunc = __pwRegistry.get(component.type);
-
-  return __pwReact.createElement(componentFunc || component.type, component.props, ...component.children.map(child => {
-    if (typeof child === 'string')
-      return child;
-    return __pwRender(child);
-  }).filter(child => {
+  const children = component.children.map(child => __renderChild(child)).filter(child => {
     if (typeof child === 'string')
       return !!child.trim();
     return true;
-  }));
+  });
+  return __pwReact.createElement(componentFunc || component.type, component.props, children);
 }
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
diff --git a/packages/playwright-ct-react17/registerSource.mjs b/packages/playwright-ct-react17/registerSource.mjs
index 076b3ad194..b50168ed0e 100644
--- a/packages/playwright-ct-react17/registerSource.mjs
+++ b/packages/playwright-ct-react17/registerSource.mjs
@@ -75,23 +75,27 @@ async function __pwResolveComponent(component) {
 }
 
 /**
- * @param {JsxComponent | JsxComponentChild} component
+ * @param {JsxComponentChild} child
+ */
+function __renderChild(child) {
+  if (Array.isArray(child))
+    return child.map(grandChild => __renderChild(grandChild));
+  if (isComponent(child))
+    return __pwRender(child);
+  return child;
+}
+
+/**
+ * @param {JsxComponent} component
  */
 function __pwRender(component) {
-  if (!isComponent(component))
-    return component;
-
   const componentFunc = __pwRegistry.get(component.type);
-
-  return __pwReact.createElement(componentFunc || component.type, component.props, ...component.children.map(child => {
-    if (typeof child === 'string')
-      return child;
-    return __pwRender(child);
-  }).filter(child => {
+  const children = component.children.map(child => __renderChild(child)).filter(child => {
     if (typeof child === 'string')
       return !!child.trim();
     return true;
-  }));
+  });
+  return __pwReact.createElement(componentFunc || component.type, component.props, children);
 }
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
diff --git a/tests/components/ct-react-vite/tests/children.spec.tsx b/tests/components/ct-react-vite/tests/children.spec.tsx
index 2db9fea017..93e1f1af72 100644
--- a/tests/components/ct-react-vite/tests/children.spec.tsx
+++ b/tests/components/ct-react-vite/tests/children.spec.tsx
@@ -49,8 +49,9 @@ test('render string as child', async ({ mount }) => {
 });
 
 test('render array as child', async ({ mount }) => {
-  const component = await mount(<DefaultChildren>{[4,2]}</DefaultChildren>);
-  await expect(component).toContainText('42');
+  const component = await mount(<DefaultChildren>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultChildren>);
+  await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
+  await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
 });
 
 test('render number as child', async ({ mount }) => {
diff --git a/tests/components/ct-react17/tests/children.spec.tsx b/tests/components/ct-react17/tests/children.spec.tsx
index 19a8a6a68e..b7751d197d 100644
--- a/tests/components/ct-react17/tests/children.spec.tsx
+++ b/tests/components/ct-react17/tests/children.spec.tsx
@@ -49,8 +49,9 @@ test('render string as child', async ({ mount }) => {
 });
 
 test('render array as child', async ({ mount }) => {
-  const component = await mount(<DefaultChildren>{[4,2]}</DefaultChildren>);
-  await expect(component).toContainText('42');
+  const component = await mount(<DefaultChildren>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultChildren>);
+  await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
+  await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
 });
 
 test('render number as child', async ({ mount }) => {