Stop reorder-scaled-parent Cypress from racing the drag frame loop.

PanSession applies pointermove on the next animation frame, so one-shot
.then() checks after a short wait flake on slow CI.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: mattgperry

dev/react/src/tests/reorder-scaled-parent.tsx

@@ -37,6 +37,8 @@ const Item = ({ item }: { item: number }) => {
             value={item}
             id={`item-${item}`}
             data-testid={`item-${item}`}
+            dragMomentum={false}
+            transition={{ duration: 0 }}
             style={{
                 y,
                 height: 50,

packages/framer-motion/cypress/integration/reorder-scaled-parent.ts

@@ -11,112 +11,96 @@
  * workaround is `correctParentTransform(ref)` via `MotionConfig
  * transformPagePoint`. These tests pin that workaround so future drag /
  * projection refactors can't silently regress it.
+ *
+ * Pointer coords are element-relative (same pattern as `drag-scaled-parent.ts`).
+ * PanSession applies pointermove on the next animation frame, so end-state
+ * checks use `.should()` — a single `.then()` after a fixed wait races RAF
+ * on slow CI.
  */
-function domOrder(): Cypress.Chainable<string[]> {
-    return cy.get("#reorder-group [data-testid]").then(($items) =>
-        Cypress._.map($items, (el) => el.getAttribute("data-testid") as string)
+function itemOrder($items: any): string[] {
+    return Cypress._.map(
+        $items,
+        (el) => el.getAttribute("data-testid") as string
     )
 }
 
 describe("Reorder inside a scaled parent (#2449 / #2750)", () => {
     it("dragged item tracks the cursor with correctParentTransform (scale 0.5)", () => {
         cy.visit("?test=reorder-scaled-parent&corrected=true&scale=0.5")
-            .wait(300)
-            .get("[data-testid='item-0']")
-            .then(($el: any) => {
-                const start = $el[0].getBoundingClientRect()
-                const startMidX = start.left + start.width / 2
-                const startMidY = start.top + start.height / 2
-
-                cy.wrap($el)
-                    .trigger("pointerdown", startMidX, startMidY, {
-                        force: true,
-                    })
-                    .wait(50)
-                    // Move past the drag threshold.
-                    .trigger("pointermove", startMidX, startMidY + 5, {
-                        force: true,
-                    })
-                    .wait(50)
-                    // Move the pointer 80px down the screen.
-                    .trigger("pointermove", startMidX, startMidY + 80, {
-                        force: true,
-                    })
-                    .wait(80)
-                    .then(([item]: any) => {
-                        const moved = item.getBoundingClientRect()
-                        const movedMidY = moved.top + moved.height / 2
-                        const screenDelta = movedMidY - startMidY
-
-                        // The element must follow the cursor (~80px on screen),
-                        // not 80 / scale (160px) as it would without the
-                        // transformPagePoint correction.
-                        expect(screenDelta).to.be.greaterThan(60)
-                        expect(screenDelta).to.be.lessThan(100)
-                    })
-                    .trigger("pointerup", { force: true })
-            })
-    })
-
-    it("reorders correctly and settles aligned with correctParentTransform", () => {
-        cy.visit("?test=reorder-scaled-parent&corrected=true&scale=0.5")
-            .wait(300)
-
-        domOrder().should("deep.equal", [
-            "item-0",
-            "item-1",
-            "item-2",
-            "item-3",
-        ])
+        cy.get("[data-testid='item-0']").should("be.visible")
 
         cy.get("[data-testid='item-0']").then(($el: any) => {
             const start = $el[0].getBoundingClientRect()
-            const startMidX = start.left + start.width / 2
             const startMidY = start.top + start.height / 2
 
-            let chain = cy
-                .wrap($el)
-                .trigger("pointerdown", startMidX, startMidY, { force: true })
+            cy.wrap($el)
+                .trigger("pointerdown", 20, 10, { force: true })
                 .wait(50)
-                // Move past the drag threshold first.
-                .trigger("pointermove", startMidX, startMidY + 6, {
-                    force: true,
-                })
+                // Move past the drag threshold.
+                .trigger("pointermove", 20, 16, { force: true })
                 .wait(50)
+                // Move the pointer 80px down the screen.
+                .trigger("pointermove", 20, 90, { force: true })
 
-            // Steady drag downward. With scale 0.5 the offset is corrected
-            // into local space, so the on-screen distance must be ~2x the
-            // local row pitch to cross item-1's centre. Incremental moves
-            // keep a non-zero velocity so checkReorder engages.
-            for (let i = 1; i <= 6; i++) {
-                chain = chain
-                    .trigger("pointermove", startMidX, startMidY + i * 14, {
-                        force: true,
-                    })
-                    .wait(60)
-            }
+            // Drag tracking is 1:1, not a tween: retry until the frame loop
+            // applies the pointermove. A wrong scale (e.g. 40px uncorrected)
+            // stays wrong and still fails.
+            cy.wrap($el).should(($item: any) => {
+                const moved = $item[0].getBoundingClientRect()
+                const screenDelta = moved.top + moved.height / 2 - startMidY
 
-            chain.trigger("pointerup", { force: true }).wait(700)
+                // The element must follow the cursor (~80px on screen),
+                // not 80 / scale (160px) or 80 * scale (40px) as it would
+                // without the transformPagePoint correction.
+                expect(screenDelta).to.be.greaterThan(60)
+                expect(screenDelta).to.be.lessThan(100)
+            })
+
+            cy.wrap($el).trigger("pointerup", { force: true })
+        })
+    })
+
+    it("reorders correctly and settles aligned with correctParentTransform", () => {
+        cy.visit("?test=reorder-scaled-parent&corrected=true&scale=0.5")
+        cy.get("[data-testid='item-0']").should("be.visible")
+
+        cy.get("#reorder-group [data-testid]").should(($items) => {
+            expect(itemOrder($items)).to.deep.equal([
+                "item-0",
+                "item-1",
+                "item-2",
+                "item-3",
+            ])
         })
 
-        // item-0 should have moved down past item-1 (a swap occurred) ...
-        domOrder().then((order) => {
+        // Element-relative moves. Scale 0.5 → ~40px screen is ~80px local,
+        // enough to cross item-1's centre (needs >35px local) without
+        // racing through the whole list.
+        cy.get("[data-testid='item-0']")
+            .trigger("pointerdown", 20, 10, { force: true })
+            .wait(50)
+            .trigger("pointermove", 20, 16, { force: true })
+            .wait(50)
+            .trigger("pointermove", 20, 35, { force: true })
+            .wait(50)
+            .trigger("pointermove", 20, 50, { force: true })
+            .wait(50)
+            .trigger("pointerup", { force: true })
+
+        cy.get("#reorder-group [data-testid]").should(($items) => {
+            const order = itemOrder($items)
             expect(order.indexOf("item-0")).to.be.greaterThan(
                 order.indexOf("item-1"),
                 `expected item-0 to sit below item-1, got ${order.join(",")}`
             )
         })
 
-        // ... and the released item should settle flush in the list, i.e. no
-        // stranded drag transform (translateY ≈ 0 in local space).
-        cy.get("[data-testid='item-0']").then(($el: any) => {
-            const transform = getComputedStyle($el[0]).transform
-            if (transform && transform !== "none") {
-                const parts = transform.match(/matrix\(([^)]+)\)/)
-                if (parts) {
-                    const translateY = parseFloat(parts[1].split(",")[5])
-                    expect(Math.abs(translateY)).to.be.lessThan(10)
-                }
+        // List sits flush: 10px local gap × 0.5 scale = 5px screen, no
+        // leftover drag/layout transform. Retry until springs finish.
+        cy.get("#reorder-group [data-testid]").should(($items) => {
+            const boxes = [...$items].map((el) => el.getBoundingClientRect())
+            for (let i = 1; i < boxes.length; i++) {
+                expect(boxes[i].top).to.be.closeTo(boxes[i - 1].bottom + 5, 4)
             }
         })
     })