add e2e test

cypress/integration/layout-cancelled-finishes.ts

@@ -0,0 +1,12 @@
+describe("Cancelled Animation", () => {
+    it("Allows the animation to be marked complete", () => {
+        cy.visit("?test=layout-cancelled-finishes")
+            .get("[data-testid='cancellable']")
+            .trigger("click")
+            .wait(200)
+            .should(($cancellable: any) => {
+                const cancellable = $cancellable[0] as HTMLDivElement
+                expect(cancellable).to.not.exist
+            })
+    })
+})

dev/tests/layout-cancelled-finishes.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { motion, AnimatePresence, useInstantLayoutTransition } from "@framer"
+
+export const App = () => {
+    const [isVisible, setIsVisible] = React.useState(true)
+    const startTransition = useInstantLayoutTransition()
+
+    return (
+        <AnimatePresence>
+            {isVisible && (
+                <motion.div
+                    onClick={() => startTransition(() => setIsVisible(false))}
+                    data-testid="cancellable"
+                    style={{ height: 100 }}
+                />
+            )}
+        </AnimatePresence>
+    )
+}