diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs
index a76792c513..c89caa7bd8 100644
--- a/packages/playwright-ct-solid/registerSource.mjs
+++ b/packages/playwright-ct-solid/registerSource.mjs
@@ -19,9 +19,7 @@
import { render as __pwSolidRender, createComponent as __pwSolidCreateComponent } from 'solid-js/web';
import __pwH from 'solid-js/h';
-
/** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */
-/** @typedef {() => import('solid-js').JSX.Element} FrameworkComponent */
/**
* @param {any} component
@@ -32,42 +30,20 @@ function isJsxComponent(component) {
}
/**
- * @param {any} child
+ * @param {any} value
*/
-function __pwCreateChild(child) {
- if (Array.isArray(child))
- return child.map(grandChild => __pwCreateChild(grandChild));
- if (isJsxComponent(child))
- return __pwCreateComponent(child);
- return child;
-}
-
-/**
- * @param {JsxComponent} component
- * @returns {any[] | undefined}
- */
-function __pwJsxChildArray(component) {
- if (!component.props.children)
- return;
- if (Array.isArray(component.props.children))
- return component.props.children;
- return [component.props.children];
-}
-
-/**
- * @param {JsxComponent} component
- */
-function __pwCreateComponent(component) {
- const children = __pwJsxChildArray(component)?.map(child => __pwCreateChild(child)).filter(child => {
- if (typeof child === 'string')
- return !!child.trim();
- return true;
+function __pwCreateComponent(value) {
+ return window.__pwTransformObject(value, v => {
+ if (isJsxComponent(v)) {
+ const component = v;
+ const props = component.props ? __pwCreateComponent(component.props) : {};
+ if (typeof component.type === 'string') {
+ const { children, ...propsWithoutChildren } = props;
+ return { result: __pwH(component.type, propsWithoutChildren, children) };
+ }
+ return { result: __pwSolidCreateComponent(component.type, props) };
+ }
});
-
- if (typeof component.type === 'string')
- return __pwH(component.type, component.props, children);
-
- return __pwSolidCreateComponent(component.type, { ...component.props, children });
}
const __pwUnmountKey = Symbol('unmountKey');
diff --git a/tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx b/tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx
index 42b3a361e8..3e8f405a5b 100644
--- a/tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx
+++ b/tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx
@@ -1,16 +1,7 @@
-type DefaultChildrenProps = {
- children?: any;
-}
+import type { PropsWithChildren } from 'react';
+
+type DefaultChildrenProps = PropsWithChildren<{}>;
export default function CheckChildrenProp(props: DefaultChildrenProps) {
- const content = 'children' in props ? props.children : 'No Children';
- return
-
Welcome!
-
- {content}
-
-
-
+ return <>{'children' in props ? props.children : 'No Children'}>
}
diff --git a/tests/components/ct-react-vite/tests/children.spec.tsx b/tests/components/ct-react-vite/tests/children.spec.tsx
index d671b14e64..03da7d2c55 100644
--- a/tests/components/ct-react-vite/tests/children.spec.tsx
+++ b/tests/components/ct-react-vite/tests/children.spec.tsx
@@ -60,7 +60,7 @@ test('render number as child', async ({ mount }) => {
await expect(component).toContainText('1337');
});
-test('render without children', async ({ mount }) => {
+test('absence of children when children prop is not provided', async ({ mount }) => {
const component = await mount();
await expect(component).toContainText('No Children');
});
diff --git a/tests/components/ct-react17/src/components/CheckChildrenProp.tsx b/tests/components/ct-react17/src/components/CheckChildrenProp.tsx
index 42b3a361e8..3e8f405a5b 100644
--- a/tests/components/ct-react17/src/components/CheckChildrenProp.tsx
+++ b/tests/components/ct-react17/src/components/CheckChildrenProp.tsx
@@ -1,16 +1,7 @@
-type DefaultChildrenProps = {
- children?: any;
-}
+import type { PropsWithChildren } from 'react';
+
+type DefaultChildrenProps = PropsWithChildren<{}>;
export default function CheckChildrenProp(props: DefaultChildrenProps) {
- const content = 'children' in props ? props.children : 'No Children';
- return
-
Welcome!
-
- {content}
-
-
-
+ return <>{'children' in props ? props.children : 'No Children'}>
}
diff --git a/tests/components/ct-react17/tests/children.spec.tsx b/tests/components/ct-react17/tests/children.spec.tsx
index 32ddabe7ac..8f55237723 100644
--- a/tests/components/ct-react17/tests/children.spec.tsx
+++ b/tests/components/ct-react17/tests/children.spec.tsx
@@ -60,7 +60,7 @@ test('render number as child', async ({ mount }) => {
await expect(component).toContainText('1337');
});
-test('render without children', async ({ mount }) => {
+test('absence of children when children prop is not provided', async ({ mount }) => {
const component = await mount();
await expect(component).toContainText('No Children');
});
diff --git a/tests/components/ct-solid/src/components/CheckChildrenProp.tsx b/tests/components/ct-solid/src/components/CheckChildrenProp.tsx
new file mode 100644
index 0000000000..113a44ced9
--- /dev/null
+++ b/tests/components/ct-solid/src/components/CheckChildrenProp.tsx
@@ -0,0 +1,7 @@
+import { type ParentProps } from 'solid-js';
+
+type DefaultChildrenProps = ParentProps<{}>;
+
+export default function CheckChildrenProp(props: DefaultChildrenProps) {
+ return <>{'children' in props ? props.children : 'No Children'}>
+}
diff --git a/tests/components/ct-solid/tests/children.spec.tsx b/tests/components/ct-solid/tests/children.spec.tsx
index 75515f754e..ebf80fe803 100644
--- a/tests/components/ct-solid/tests/children.spec.tsx
+++ b/tests/components/ct-solid/tests/children.spec.tsx
@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-solid';
import Button from '@/components/Button';
import DefaultChildren from '@/components/DefaultChildren';
import MultipleChildren from '@/components/MultipleChildren';
+import CheckChildrenProp from '@/components/CheckChildrenProp'
test('render a default child', async ({ mount }) => {
const component = await mount(
@@ -58,3 +59,8 @@ test('render number as child', async ({ mount }) => {
const component = await mount({1337});
await expect(component).toContainText('1337');
});
+
+test('absence of children when children prop is not provided', async ({ mount }) => {
+ const component = await mount();
+ await expect(component).toContainText('No Children');
+});