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': ``, + '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