From 2da6ee3d744ba3ebc2b8e39a17feaf9cdee73c19 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 22 Dec 2023 14:47:39 -0800
Subject: [PATCH] chore: render only react child

---
 .../playwright-ct-react/registerSource.mjs    |  3 +-
 .../playwright-ct-react17/registerSource.mjs  |  3 +-
 .../playwright.ct-react.spec.ts               | 34 +++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-ct-react/registerSource.mjs b/packages/playwright-ct-react/registerSource.mjs
index 6ac6b8372d74ba..e8c2d6ca681458 100644
--- a/packages/playwright-ct-react/registerSource.mjs
+++ b/packages/playwright-ct-react/registerSource.mjs
@@ -96,7 +96,8 @@ function __pwRender(component) {
       return !!child.trim();
     return true;
   });
-  return __pwReact.createElement(componentFunc || component.type, component.props, children);
+  const reactChildren = Array.isArray(children) && children.length === 1 ? children[0] : children;
+  return __pwReact.createElement(componentFunc || component.type, component.props, reactChildren);
 }
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
diff --git a/packages/playwright-ct-react17/registerSource.mjs b/packages/playwright-ct-react17/registerSource.mjs
index e6f89db9359983..d0d6f2c37faa36 100644
--- a/packages/playwright-ct-react17/registerSource.mjs
+++ b/packages/playwright-ct-react17/registerSource.mjs
@@ -95,7 +95,8 @@ function __pwRender(component) {
       return !!child.trim();
     return true;
   });
-  return __pwReact.createElement(componentFunc || component.type, component.props, children);
+  const reactChildren = Array.isArray(children) && children.length === 1 ? children[0] : children;
+  return __pwReact.createElement(componentFunc || component.type, component.props, reactChildren);
 }
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
diff --git a/tests/playwright-test/playwright.ct-react.spec.ts b/tests/playwright-test/playwright.ct-react.spec.ts
index 4eb6821007fb43..c2afaef5f909b4 100644
--- a/tests/playwright-test/playwright.ct-react.spec.ts
+++ b/tests/playwright-test/playwright.ct-react.spec.ts
@@ -461,3 +461,37 @@ test('should prioritize the vite host config over the baseUrl config', async ({
   expect(result.exitCode).toBe(0);
   expect(result.passed).toBe(1);
 });
+
+test('should normalize children', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightConfig,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/component.tsx': `
+      import React from 'react';
+      export const OneChild: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+        React.Children.only(children);
+        return <>{children}</>;
+      };
+      export const OtherComponent: React.FC = () => <p>othercomponent</p>;   
+    `,
+
+    'src/component.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { OneChild, OtherComponent } from './component';
+
+      test.only("can pass an HTML element to OneChild", async ({ mount }) => {
+        const component = await mount(<OneChild><p>child</p> </OneChild>);
+        await expect(component).toHaveText("child");
+      });
+      
+      test.only("can pass another component to OneChild", async ({ mount }) => {
+        const component = await mount(<OneChild><OtherComponent /></OneChild>);
+        await expect(component).toHaveText("othercomponent");
+      });
+    `,
+  }, { workers: 1 });
+
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(2);
+});