From ebcac29ca7b516b51ce1abbf58c0c91a5474fca0 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Tue, 1 Oct 2024 16:08:30 +0200
Subject: [PATCH] fix(ct-react): support root fragments

---
 .../playwright-ct-react/registerSource.mjs    |  5 ++++-
 packages/playwright/jsx-runtime.js            |  2 +-
 .../playwright.ct-react.spec.ts               | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/playwright-ct-react/registerSource.mjs b/packages/playwright-ct-react/registerSource.mjs
index e5a14c3db6..4bbca04623 100644
--- a/packages/playwright-ct-react/registerSource.mjs
+++ b/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) };
     }
   });
 }
diff --git a/packages/playwright/jsx-runtime.js b/packages/playwright/jsx-runtime.js
index d35e5e6e8d..1bfa721361 100644
--- a/packages/playwright/jsx-runtime.js
+++ b/packages/playwright/jsx-runtime.js
@@ -32,7 +32,7 @@ function jsxs(type, props, key) {
   };
 }
 
-const Fragment = {};
+const Fragment = { __pw_type: 'fragment' };
 
 module.exports = {
   Fragment,
diff --git a/tests/playwright-test/playwright.ct-react.spec.ts b/tests/playwright-test/playwright.ct-react.spec.ts
index ed3fa47caf..2ffa6ee63c 100644
--- a/tests/playwright-test/playwright.ct-react.spec.ts
+++ b/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);
+});
\ No newline at end of file