Skip to content

Commit

Permalink
chore: render only react child
Browse files Browse the repository at this point in the history
  • Loading branch information
pavelfeldman committed Dec 22, 2023
1 parent 32ecb07 commit d15bd0f
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 2 deletions.
3 changes: 2 additions & 1 deletion packages/playwright-ct-react/registerSource.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ function __pwRender(component) {
return !!child.trim();
return true;
});
return __pwReact.createElement(componentFunc || component.type, component.props, children);
const reactChildren = Array.isArray(children) && children.length === 1 ? children[0] : children;
return __pwReact.createElement(componentFunc || component.type, component.props, reactChildren);
}

window.playwrightMount = async (component, rootElement, hooksConfig) => {
Expand Down
3 changes: 2 additions & 1 deletion packages/playwright-ct-react17/registerSource.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@ function __pwRender(component) {
return !!child.trim();
return true;
});
return __pwReact.createElement(componentFunc || component.type, component.props, children);
const reactChildren = Array.isArray(children) && children.length === 1 ? children[0] : children;
return __pwReact.createElement(componentFunc || component.type, component.props, reactChildren);
}

window.playwrightMount = async (component, rootElement, hooksConfig) => {
Expand Down
34 changes: 34 additions & 0 deletions tests/playwright-test/playwright.ct-react.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -461,3 +461,37 @@ test('should prioritize the vite host config over the baseUrl config', async ({
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});

test('should normalize children', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright.config.ts': playwrightConfig,
'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
'playwright/index.ts': ``,
'src/component.tsx': `
import React from 'react';
export const OneChild: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
React.Children.only(children);
return <>{children}</>;
};
export const OtherComponent: React.FC = () => <p>othercomponent</p>;
`,

'src/component.spec.tsx': `
import { test, expect } from '@playwright/experimental-ct-react';
import { OneChild, OtherComponent } from './component';
test("can pass an HTML element to OneChild", async ({ mount }) => {
const component = await mount(<OneChild><p>child</p> </OneChild>);
await expect(component).toHaveText("child");
});
test("can pass another component to OneChild", async ({ mount }) => {
const component = await mount(<OneChild><OtherComponent /></OneChild>);
await expect(component).toHaveText("othercomponent");
});
`,
}, { workers: 1 });

expect(result.exitCode).toBe(0);
expect(result.passed).toBe(2);
});

0 comments on commit d15bd0f

Please sign in to comment.