diff --git a/tests/components/ct-react/src/components/Counter.tsx b/tests/components/ct-react/src/components/Counter.tsx new file mode 100644 index 0000000000..2548202aec --- /dev/null +++ b/tests/components/ct-react/src/components/Counter.tsx @@ -0,0 +1,19 @@ +import { useRef } from "react" + + type CounterProps = { + count?: number; + onClick?(props: string): void; + children?: any; + } + + let _remountCount = 1; + + export default function Counter(props: CounterProps) { + const remountCount = useRef(_remountCount++); + return
props.onClick?.('hello')}> +
{ props.count }
+
{ remountCount.current }
+ { props.children } +
+ } + \ No newline at end of file diff --git a/tests/components/ct-react/src/tests.spec.tsx b/tests/components/ct-react/src/tests.spec.tsx index ab94e0d8db..72a6a9765c 100644 --- a/tests/components/ct-react/src/tests.spec.tsx +++ b/tests/components/ct-react/src/tests.spec.tsx @@ -6,6 +6,7 @@ import Button from './components/Button'; import DefaultChildren from './components/DefaultChildren'; import MultipleChildren from './components/MultipleChildren'; import MultiRoot from './components/MultiRoot'; +import Counter from './components/Counter'; test.use({ viewport: { width: 500, height: 500 } }); @@ -14,6 +15,41 @@ test('props should work', async ({ mount }) => { await expect(component).toContainText('Submit'); }); +test('renderer updates props without remounting', async ({ mount }) => { + const component = await mount() + await expect(component.locator('#props')).toContainText('9001') + + await component.rerender() + await expect(component).not.toContainText('9001') + await expect(component.locator('#props')).toContainText('1337') + + await expect(component.locator('#remount-count')).toContainText('1') +}); + +test('renderer updates callbacks without remounting', async ({ mount }) => { + const component = await mount() + + const messages: string[] = [] + await component.rerender( { + messages.push(message) + }} />) + await component.click(); + expect(messages).toEqual(['hello']) + + await expect(component.locator('#remount-count')).toContainText('1') +}); + +test('renderer updates slots without remounting', async ({ mount }) => { + const component = await mount(Default Slot) + await expect(component).toContainText('Default Slot') + + await component.rerender(Test Slot) + await expect(component).not.toContainText('Default Slot') + await expect(component).toContainText('Test Slot') + + await expect(component.locator('#remount-count')).toContainText('1') +}); + test('callback should work', async ({ mount }) => { const messages: string[] = [] const component = await mount(