fix(ct): solid and react JS as child (#20125)

packages/playwright-ct-react/registerSource.mjs

@@ -36,9 +36,11 @@ export function register(components) {
 
 /**
  * @param {Component} component
- * @returns {JSX.Element}
  */
 function render(component) {
+  if (typeof component !== 'object' || Array.isArray(component))
+    return component;
+
   let componentFunc = registry.get(component.type);
   if (!componentFunc) {
     // Lookup by shorthand.

packages/playwright-ct-solid/registerSource.mjs

@@ -42,7 +42,7 @@ function createChild(child) {
  * @param {Component} component
  */
 function createComponent(component) {
-  if (typeof component === 'string')
+  if (typeof component !== 'object' || Array.isArray(component))
     return component;
 
   let Component = registry.get(component.type);

packages/playwright-test/types/component.d.ts

@@ -34,7 +34,7 @@ export type ObjectComponent = {
   options?: MountOptions
 };
 
-export type Component = JsxComponent | ObjectComponent;
+export type Component = JsxComponent | ObjectComponent | number | string | Array<any>;
 
 declare global {
   interface Window {

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

@@ -42,3 +42,18 @@ test('render named children', async ({ mount }) => {
   await expect(component).toContainText('Main Content');
   await expect(component).toContainText('Footer');
 });
+
+test('render string as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{'string'}</DefaultChildren>);
+  await expect(component).toContainText('string');
+});
+
+test('render array as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{[4,2]}</DefaultChildren>);
+  await expect(component).toContainText('42');
+});
+
+test('render number as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{1337}</DefaultChildren>);
+  await expect(component).toContainText('1337');
+});

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

@@ -42,3 +42,18 @@ test('render named children', async ({ mount }) => {
   await expect(component).toContainText('Main Content');
   await expect(component).toContainText('Footer');
 });
+
+test('render string as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{'string'}</DefaultChildren>);
+  await expect(component).toContainText('string');
+});
+
+test('render array as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{[4,2]}</DefaultChildren>);
+  await expect(component).toContainText('42');
+});
+
+test('render number as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{1337}</DefaultChildren>);
+  await expect(component).toContainText('1337');
+});

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

@@ -42,3 +42,18 @@ test('render named children', async ({ mount }) => {
   await expect(component).toContainText('Main Content');
   await expect(component).toContainText('Footer');
 });
+
+test('render string as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{'string'}</DefaultChildren>);
+  await expect(component).toContainText('string');
+});
+
+test('render array as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{[4,2]}</DefaultChildren>);
+  await expect(component).toContainText('42');
+});
+
+test('render number as child', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>{1337}</DefaultChildren>);
+  await expect(component).toContainText('1337');
+});