fix(ct-react): support root fragments

packages/playwright-ct-react/registerSource.mjs

@@ -39,6 +39,9 @@ function __pwRender(value) {
   return window.__pwTransformObject(value, v => {
     if (isJsxComponent(v)) {
       const component = v;
+      let type = component.type;
+      if ('__pw_type' in type && type.__pw_type === 'fragment')
+        type = __pwReact.Fragment;
       const props = component.props ? __pwRender(component.props) : {};
       const key = component.key ? __pwRender(component.key) : undefined;
       const { children, ...propsWithoutChildren } = props;
@@ -47,7 +50,7 @@ function __pwRender(value) {
       const createElementArguments = [propsWithoutChildren];
       if (children)
         createElementArguments.push(children);
-      return { result: __pwReact.createElement(component.type, ...createElementArguments) };
+      return { result: __pwReact.createElement(type, ...createElementArguments) };
     }
   });
 }

packages/playwright/jsx-runtime.js

@@ -32,7 +32,7 @@ function jsxs(type, props, key) {
   };
 }
 
-const Fragment = {};
+const Fragment = { __pw_type: 'fragment' };
 
 module.exports = {
   Fragment,

tests/playwright-test/playwright.ct-react.spec.ts

@@ -596,3 +596,22 @@ test('should allow import from shared file', async ({ runInlineTest }) => {
   expect(result.exitCode).toBe(0);
   expect(result.passed).toBe(1);
 });
+
+
+test('should render fragment at root', async ({ runInlineTest }) => {
+  const result = await runInlineTest({
+    'playwright.config.ts': playwrightCtConfigText,
+    'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+    'playwright/index.ts': ``,
+    'src/component.spec.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+
+      test('should work', async ({ mount, page }) => {
+        const component = await mount(<>Learn React</>);
+        await expect(component).toContainText('Learn React');
+      });
+    `
+  });
+  expect(result.exitCode).toBe(0);
+  expect(result.passed).toBe(1);
+});