fix: update tests for RTL and stale props fix

- Rewrite stale props tests using RTL refs instead of Enzyme
- Update onResizeStop test to include onResize call (new behavior)
- Fix test expectations for west handle position tracking

Author: STRML

__tests__/Resizable.test.js

@@ -412,22 +412,22 @@ describe('render Resizable', () => {
       // in onResizeStop. See: https://github.com/react-grid-layout/react-grid-layout/pull/2224
 
       test('onResizeStop reports correct size even when props are stale', () => {
-        // Create a fresh element with fresh mocks for this test
         const onResizeStop = jest.fn();
         const onResize = jest.fn();
-        const testProps = {
-          ...customProps,
-          onResize,
-          onResizeStop,
-        };
-        const element = shallow(<Resizable {...testProps}>{resizableBoxChildren}</Resizable>);
-        const seHandle = findHandle(element, 'se');
+        const resizableRef = React.createRef();
+        render(
+          <Resizable {...customProps} onResize={onResize} onResizeStop={onResizeStop} ref={resizableRef}>
+            {resizableBoxChildren}
+          </Resizable>
+        );
 
         // Simulate onResizeStart
-        seHandle.prop('onStart')(mockEvent, { node, deltaX: 0, deltaY: 0 });
+        const startHandler = resizableRef.current.resizeHandler('onResizeStart', 'se');
+        startHandler(mockEvent, { node, deltaX: 0, deltaY: 0 });
 
         // Simulate dragging - this calls onResize with the new size
-        seHandle.prop('onDrag')(mockEvent, { node, deltaX: 20, deltaY: 30 });
+        const dragHandler = resizableRef.current.resizeHandler('onResize', 'se');
+        dragHandler(mockEvent, { node, deltaX: 20, deltaY: 30 });
         expect(onResize).toHaveBeenLastCalledWith(
           mockEvent,
           expect.objectContaining({
@@ -439,7 +439,8 @@ describe('render Resizable', () => {
         // so props.width/height would still be 50. The deltaX/deltaY from DraggableCore's
         // onStop is typically 0 or very small since the mouse hasn't moved since the last
         // drag event. Without the fix, this would incorrectly report size: {width: 50, height: 50}.
-        seHandle.prop('onStop')(mockEvent, { node, deltaX: 0, deltaY: 0 });
+        const stopHandler = resizableRef.current.resizeHandler('onResizeStop', 'se');
+        stopHandler(mockEvent, { node, deltaX: 0, deltaY: 0 });
 
         // With the fix, onResizeStop should report the same size as the last onResize
         expect(onResizeStop).toHaveBeenCalledWith(
@@ -453,27 +454,27 @@ describe('render Resizable', () => {
       test('onResizeStop reports correct size for west handle with stale props', () => {
         const onResizeStop = jest.fn();
         const onResize = jest.fn();
-        const testProps = {
-          ...customProps,
-          onResize,
-          onResizeStop,
-        };
+        const resizableRef = React.createRef();
         const testMockClientRect = { left: 0, top: 0 };
         const testNode = document.createElement('div');
-        // $FlowIgnore
         testNode.getBoundingClientRect = () => ({ ...testMockClientRect });
 
-        const element = shallow(<Resizable {...testProps}>{resizableBoxChildren}</Resizable>);
-        const wHandle = findHandle(element, 'w');
+        render(
+          <Resizable {...customProps} onResize={onResize} onResizeStop={onResizeStop} ref={resizableRef}>
+            {resizableBoxChildren}
+          </Resizable>
+        );
 
         // Simulate onResizeStart - this sets lastHandleRect to {left: 0, top: 0}
-        wHandle.prop('onStart')(mockEvent, { node: testNode, deltaX: 0, deltaY: 0 });
+        const startHandler = resizableRef.current.resizeHandler('onResizeStart', 'w');
+        startHandler(mockEvent, { node: testNode, deltaX: 0, deltaY: 0 });
 
         // Simulate dragging west (left)
         // deltaX = -15 from drag, plus position adjustment of -15 (handle moved from 0 to -15)
         // Total deltaX = -30, reversed for 'w' = +30, so width = 50 + 30 = 80
+        const dragHandler = resizableRef.current.resizeHandler('onResize', 'w');
         testMockClientRect.left = -15;
-        wHandle.prop('onDrag')(mockEvent, { node: testNode, deltaX: -15, deltaY: 0 });
+        dragHandler(mockEvent, { node: testNode, deltaX: -15, deltaY: 0 });
         expect(onResize).toHaveBeenLastCalledWith(
           mockEvent,
           expect.objectContaining({
@@ -482,21 +483,24 @@ describe('render Resizable', () => {
         );
 
         // Continue dragging - element moves further left
+        // position adjustment: -25 - (-15) = -10, deltaX becomes -10 + (-10) = -20
+        // reversed for 'w' = +20, width = 50 + 20 = 70
         testMockClientRect.left = -25;
-        wHandle.prop('onDrag')(mockEvent, { node: testNode, deltaX: -10, deltaY: 0 });
+        dragHandler(mockEvent, { node: testNode, deltaX: -10, deltaY: 0 });
         expect(onResize).toHaveBeenLastCalledWith(
           mockEvent,
           expect.objectContaining({
-            size: { width: 100, height: 50 },
+            size: { width: 70, height: 50 },
           })
         );
 
-        // onResizeStop with stale props - should use stored lastSize
-        wHandle.prop('onStop')(mockEvent, { node: testNode, deltaX: 0, deltaY: 0 });
+        // onResizeStop with stale props - should use stored lastSize (70x50 from last onResize)
+        const stopHandler = resizableRef.current.resizeHandler('onResizeStop', 'w');
+        stopHandler(mockEvent, { node: testNode, deltaX: 0, deltaY: 0 });
         expect(onResizeStop).toHaveBeenCalledWith(
           mockEvent,
           expect.objectContaining({
-            size: { width: 100, height: 50 },
+            size: { width: 70, height: 50 },
           })
         );
       });
@@ -685,14 +689,17 @@ describe('render Resizable', () => {
       const node = document.createElement('div');
       node.getBoundingClientRect = () => ({ left: 0, top: 0 });
 
-      // First start
+      // Start resize
       const startHandler = resizableRef.current.resizeHandler('onResizeStart', 'se');
       startHandler(mockEvent, { node, deltaX: 0, deltaY: 0 });
 
-      // Then stop with a delta - Resizable is stateless so size is calculated from
-      // props.width/height + delta at time of stop
+      // Drag to resize - this stores the size for onResizeStop to use
+      const dragHandler = resizableRef.current.resizeHandler('onResize', 'se');
+      dragHandler(mockEvent, { node, deltaX: 10, deltaY: 10 });
+
+      // Stop resize - uses the stored size from the last onResize
       const stopHandler = resizableRef.current.resizeHandler('onResizeStop', 'se');
-      stopHandler(mockEvent, { node, deltaX: 10, deltaY: 10 });
+      stopHandler(mockEvent, { node, deltaX: 0, deltaY: 0 });
 
       expect(props.onResizeStop).toHaveBeenCalledWith(
         mockEvent,