test(ct): react rerender (#16597)

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 <div onClick={() => props.onClick?.('hello')}>
+     <div id="props">{ props.count }</div>
+     <div id="remount-count">{ remountCount.current }</div>
+     { props.children }
+   </div>
+ }
+ 

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(<Counter count={9001} />)
+  await expect(component.locator('#props')).toContainText('9001')
+
+  await component.rerender(<Counter count={1337} />)
+  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(<Counter />)
+
+  const messages: string[] = []
+  await component.rerender(<Counter onClick={message => { 
+    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(<Counter>Default Slot</Counter>)
+  await expect(component).toContainText('Default Slot')
+
+  await component.rerender(<Counter>Test Slot</Counter>)
+  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(<Button title="Submit" onClick={data => {