fix(ct-react+ct-react17): only pass children to React.createElement when they are defined (#29592)

packages/playwright-ct-react/registerSource.mjs

@@ -40,7 +40,13 @@ function __pwRender(value) {
     if (isJsxComponent(v)) {
       const component = v;
       const props = component.props ? __pwRender(component.props) : {};
-      return { result: __pwReact.createElement(/** @type { any } */ (component.type), { ...props, children: undefined }, props.children) };
+      const {children, ...propsWithoutChildren} = props;
+      /** @type {[any, any, any?]} */
+      const createElementArguments = [component.type, propsWithoutChildren];
+      if(children){
+        createElementArguments.push(children);
+      }
+      return { result: __pwReact.createElement(...createElementArguments) };
     }
   });
 }

packages/playwright-ct-react17/registerSource.mjs

@@ -40,7 +40,14 @@ function __pwRender(value) {
     if (isJsxComponent(v)) {
       const component = v;
       const props = component.props ? __pwRender(component.props) : {};
-      return { result: __pwReact.createElement(/** @type { any } */ (component.type), { ...props, children: undefined }, props.children) };
+
+      const {children, ...propsWithoutChildren} = props;
+      /** @type {[any, any, any?]} */
+      const createElementArguments = [component.type, propsWithoutChildren];
+      if(children){
+        createElementArguments.push(children);
+      }
+      return { result: __pwReact.createElement(...createElementArguments) };
     }
   });
 }

tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx

@@ -0,0 +1,16 @@
+type DefaultChildrenProps = {
+  children?: any;
+}
+
+export default function CheckChildrenProp(props: DefaultChildrenProps) {
+  const content = 'children' in props ? props.children : 'No Children';
+  return <div>
+    <h1>Welcome!</h1>
+    <main>
+      {content}
+    </main>
+    <footer>
+      Thanks for visiting.
+    </footer>
+  </div>
+}

tests/components/ct-react-vite/tests/children.spec.tsx

@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/experimental-ct-react';
 import Button from '@/components/Button';
+import CheckChildrenProp from '@/components/CheckChildrenProp';
 import DefaultChildren from '@/components/DefaultChildren';
 import MultipleChildren from '@/components/MultipleChildren';
 
@@ -58,3 +59,8 @@ test('render number as child', async ({ mount }) => {
   const component = await mount(<DefaultChildren>{1337}</DefaultChildren>);
   await expect(component).toContainText('1337');
 });
+
+test('render without children', async ({ mount }) => {
+  const component = await mount(<CheckChildrenProp />);
+  await expect(component).toContainText('No Children');
+});

tests/components/ct-react17/src/components/CheckChildrenProp.tsx

@@ -0,0 +1,16 @@
+type DefaultChildrenProps = {
+  children?: any;
+}
+
+export default function CheckChildrenProp(props: DefaultChildrenProps) {
+  const content = 'children' in props ? props.children : 'No Children';
+  return <div>
+    <h1>Welcome!</h1>
+    <main>
+      {content}
+    </main>
+    <footer>
+      Thanks for visiting.
+    </footer>
+  </div>
+}

tests/components/ct-react17/tests/children.spec.tsx

@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/experimental-ct-react17';
 import Button from '@/components/Button';
+import CheckChildrenProp from '@/components/CheckChildrenProp';
 import DefaultChildren from '@/components/DefaultChildren';
 import MultipleChildren from '@/components/MultipleChildren';
 
@@ -58,3 +59,8 @@ test('render number as child', async ({ mount }) => {
   const component = await mount(<DefaultChildren>{1337}</DefaultChildren>);
   await expect(component).toContainText('1337');
 });
+
+test('render without children', async ({ mount }) => {
+  const component = await mount(<CheckChildrenProp />);
+  await expect(component).toContainText('No Children');
+});