Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(ct-react+ct-react17): only pass children to React.createElement when they are defined (#29592)

Browse source
This commit is contained in:
Jeppe Reinhold 2024-02-23 21:30:42 +01:00 committed by GitHub
parent 034b550810
commit 4d868f6ba8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 59 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/playwright-ct-react/registerSource.mjs
View file

@ -40,7 +40,13 @@ function __pwRender(value) {
if (isJsxComponent(v)) {
const component = v;
const props = component.props ? __pwRender(component.props) : {};
return { result: __pwReact.createElement(/** @type { any } */ (component.type), { ...props, children: undefined }, props.children) };
const {children, ...propsWithoutChildren} = props;
/** @type {[any, any, any?]} */
const createElementArguments = [component.type, propsWithoutChildren];
if(children){
createElementArguments.push(children);
}
return { result: __pwReact.createElement(...createElementArguments) };
}
});
}

9
packages/playwright-ct-react17/registerSource.mjs
View file

@ -40,7 +40,14 @@ function __pwRender(value) {
if (isJsxComponent(v)) {
const component = v;
const props = component.props ? __pwRender(component.props) : {};
return { result: __pwReact.createElement(/** @type { any } */ (component.type), { ...props, children: undefined }, props.children) };
const {children, ...propsWithoutChildren} = props;
/** @type {[any, any, any?]} */
const createElementArguments = [component.type, propsWithoutChildren];
if(children){
createElementArguments.push(children);
}
return { result: __pwReact.createElement(...createElementArguments) };
}
});
}

16
tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx Normal file
View file

@ -0,0 +1,16 @@
type DefaultChildrenProps = {
children?: any;
}
export default function CheckChildrenProp(props: DefaultChildrenProps) {
const content = 'children' in props ? props.children : 'No Children';
return <div>
<h1>Welcome!</h1>
<main>
{content}
</main>
<footer>
Thanks for visiting.
</footer>
</div>
}

6
tests/components/ct-react-vite/tests/children.spec.tsx
View file

@ -1,5 +1,6 @@
import { test, expect } from '@playwright/experimental-ct-react';
import Button from '@/components/Button';
import CheckChildrenProp from '@/components/CheckChildrenProp';
import DefaultChildren from '@/components/DefaultChildren';
import MultipleChildren from '@/components/MultipleChildren';
@ -58,3 +59,8 @@ test('render number as child', async ({ mount }) => {
const component = await mount(<DefaultChildren>{1337}</DefaultChildren>);
await expect(component).toContainText('1337');
});
test('render without children', async ({ mount }) => {
const component = await mount(<CheckChildrenProp />);
await expect(component).toContainText('No Children');
});

16
tests/components/ct-react17/src/components/CheckChildrenProp.tsx Normal file
View file

@ -0,0 +1,16 @@
type DefaultChildrenProps = {
children?: any;
}
export default function CheckChildrenProp(props: DefaultChildrenProps) {
const content = 'children' in props ? props.children : 'No Children';
return <div>
<h1>Welcome!</h1>
<main>
{content}
</main>
<footer>
Thanks for visiting.
</footer>
</div>
}

6
tests/components/ct-react17/tests/children.spec.tsx
View file

@ -1,5 +1,6 @@
import { test, expect } from '@playwright/experimental-ct-react17';
import Button from '@/components/Button';
import CheckChildrenProp from '@/components/CheckChildrenProp';
import DefaultChildren from '@/components/DefaultChildren';
import MultipleChildren from '@/components/MultipleChildren';
@ -58,3 +59,8 @@ test('render number as child', async ({ mount }) => {
const component = await mount(<DefaultChildren>{1337}</DefaultChildren>);
await expect(component).toContainText('1337');
});
test('render without children', async ({ mount }) => {
const component = await mount(<CheckChildrenProp />);
await expect(component).toContainText('No Children');
});