Framer Motion example test

test.ts

  test("drag handlers aren't frozen at drag session start", async () => {
        let count = 0
        const onDragEnd = deferred()
        const Component = () => {
            const [increment, setIncrement] = useState(1)
            return (
                <MockDrag>
                    <motion.div
                        drag
                        onDragStart={() => {
                            count += increment
                            setIncrement(2)
                        }}
                        onDrag={() => (count += increment)}
                        onDragEnd={() => {
                            count += increment + 1
                            onDragEnd.resolve()
                        }}
                    />
                </MockDrag>
            )
        }

        const { container, rerender } = render(<Component />)
        rerender(<Component />)

        const pointer = await drag(container.firstChild).to(100, 100) // + 1 + 2 = 3
        await frame.postRender() // + 2 = 5
        await pointer.to(50, 50) // + 2 = 7
        await frame.postRender() // + 2 = 9
        pointer.end() // + 3 = 12
        await onDragEnd.promise

        expect(count).toBe(12)
    })