Converting all tests to strict mode

dev/examples/dragExternalControl.tsx

@@ -21,13 +21,13 @@ export const App = () => {
             <motion.div
                 style={style}
                 onTapStart={e => setDragOriginEvent(e)}
-                onTapEnd={() => setDragOriginEvent(null)}
+                onTapCancel={() => setDragOriginEvent(null)}
                 onTap={() => setDragOriginEvent(null)}
             />
             <motion.div
                 style={style}
                 onTapStart={e => setDragOriginEvent(e)}
-                onTapEnd={() => setDragOriginEvent(null)}
+                onTapCancel={() => setDragOriginEvent(null)}
                 onTap={() => setDragOriginEvent(null)}
             />
         </motion.div>

jest.config.json

@@ -7,7 +7,7 @@
         "!**/__tests__/**"
     ],
     "coverageDirectory": "<rootDir>/../coverage",
-    "setupFilesAfterEnv": ["<rootDir>/../jest.setup.ts"],
+    "setupFilesAfterEnv": ["<rootDir>/../jest.setup.tsx"],
     "testMatch": ["**/__tests__/**/*.test.(js|ts)?(x)"],
     "testPathIgnorePatterns": ["ssr.test.tsx"],
     "watchPlugins": [

jest.setup.ts → jest.setup.tsx

@@ -2,4 +2,9 @@ import "jest-dom/extend-expect"
 // Get fireEvent from the native testing library
 // because @testing-library/react one switches out mouseEnter and mouseLeave
 import { fireEvent } from "@testing-library/dom"
+import { render as testRender } from "@testing-library/react"
+import * as React from "react"
+
 export const { mouseEnter, mouseLeave } = fireEvent
+export const render = (children: any) =>
+    testRender(<React.StrictMode>{children}</React.StrictMode>)

src/animation/__tests__/css-variables.test.tsx

@@ -1,5 +1,4 @@
-import "../../../jest.setup"
-import { render } from "@testing-library/react"
+import { render } from "../../../jest.setup"
 import { motion } from "../../motion"
 import { parseCSSVariable } from "../../dom/css-variables-conversion"
 import * as React from "react"

src/animation/__tests__/index.test.tsx

@@ -1,5 +1,4 @@
-import "../../../jest.setup"
-import { render } from "@testing-library/react"
+import { render } from "../../../jest.setup"
 import * as React from "react"
 import { useEffect } from "react"
 import { motion } from "../../motion"

src/animation/__tests__/use-animated-state.test.tsx

@@ -1,5 +1,4 @@
-import "../../../jest.setup"
-import { render } from "@testing-library/react"
+import { render } from "../../../jest.setup"
 import * as React from "react"
 import { useEffect } from "react"
 import { useAnimatedState } from "../use-animated-state"

src/behaviours/__tests__/index.test.tsx

@@ -1,9 +1,8 @@
 import * as React from "react"
 import { useState } from "react"
-import "../../../jest.setup"
+import { render } from "../../../jest.setup"
 import { motion } from "../../"
 import { motionValue, MotionValue } from "../../value"
-import { render } from "@testing-library/react"
 import { fireEvent } from "@testing-library/dom"
 import sync from "framesync"
 import { Constraints } from "../use-drag"
@@ -442,6 +441,43 @@ describe("dragging", () => {
         return expect(promise).resolves.toEqual([0, 20])
     })
 
+    test("block drag propagation release velocity", async () => {
+        const promise = new Promise(resolve => {
+            const childX = motionValue(0)
+            const parentX = motionValue(0)
+            const Component = () => (
+                <MockDrag>
+                    <motion.div drag="x" style={{ x: parentX }}>
+                        <motion.div
+                            data-testid="child"
+                            drag
+                            style={{ x: childX }}
+                        />
+                    </motion.div>
+                </MockDrag>
+            )
+
+            const { getByTestId, rerender } = render(<Component />)
+            rerender(<Component />)
+
+            const pointer = drag(getByTestId("child")).to(10, 0)
+
+            sync.postRender(() => {
+                pointer.to(20, 0)
+
+                sync.postRender(() => {
+                    pointer.end()
+
+                    setTimeout(() => {
+                        resolve(parentX.get())
+                    }, 50)
+                })
+            })
+        })
+
+        return expect(promise).resolves.toEqual(0)
+    })
+
     test("block drag propagation even after parent has been dragged", async () => {
         const promise = new Promise(resolve => {
             const childX = motionValue(0)

src/behaviours/use-drag.ts

@@ -416,8 +416,6 @@ export function useDrag(
         event: MouseEvent | TouchEvent | PointerEvent,
         info: PanInfo
     ) {
-        dragStatus.isDragging = true
-
         // Resolve the constraints again in case anything has changed in the meantime.
         if (constraintsNeedResolution) {
             dragStatus.constraints = calculateConstraintsFromDom(
@@ -449,6 +447,7 @@ export function useDrag(
             }
         }
 
+        dragStatus.isDragging = true
         dragStatus.currentDirection = null
 
         const { onDragStart } = handlersRef.current

src/components/AnimatePresence/__tests__/AnimatePresence.test.tsx

@@ -1,6 +1,5 @@
-import "../../../../jest.setup"
+import { render } from "../../../../jest.setup"
 import * as React from "react"
-import { render } from "@testing-library/react"
 import { AnimatePresence, motion } from "../../.."
 import { motionValue } from "../../../value"
 import { act } from "react-dom/test-utils"

src/components/SyncLayout.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { createContext } from "react"
 import { useForceUpdate } from "../utils/use-force-update"
 
-type SyncLayout = () => void
+export type SyncLayout = () => void
 
 interface SyncLayoutProps {
     children: React.ReactNode

src/events/__tests__/use-event.test.tsx

@@ -1,5 +1,5 @@
-import "../../../jest.setup"
-import { fireEvent, render } from "@testing-library/react"
+import { render } from "../../../jest.setup"
+import { fireEvent } from "@testing-library/react"
 import * as React from "react"
 import { useRef, useEffect } from "react"
 import { useDomEvent } from "../use-dom-event"

src/events/__tests__/use-pointer-events.test.tsx

@@ -1,6 +1,5 @@
-import { mouseEnter, mouseLeave } from "../../../jest.setup"
+import { mouseEnter, mouseLeave, render } from "../../../jest.setup"
 import { fireEvent } from "@testing-library/dom"
-import { render } from "@testing-library/react"
 import * as React from "react"
 import { usePointerEvent } from "../use-pointer-event"
 import { enableTouchEvents, enablePointerEvents } from "./utils/event-helpers"

src/gestures/__tests__/hover.test.tsx

@@ -1,7 +1,7 @@
-import { mouseEnter, mouseLeave } from "../../../jest.setup"
+import { mouseEnter, mouseLeave, render } from "../../../jest.setup"
 import * as React from "react"
 import { motion } from "../../"
-import { render, fireEvent } from "@testing-library/react"
+import { fireEvent } from "@testing-library/react"
 import { motionValue } from "../../value"
 import { transformValues } from "../../motion/__tests__/util-transform-values"
 import sync from "framesync"
@@ -12,9 +12,7 @@ describe("hover", () => {
         const hoverIn = jest.fn()
         const hoverOut = jest.fn()
         const Component = () => (
-            <React.StrictMode>
-                <motion.div onHoverStart={hoverIn} onHoverEnd={hoverOut} />
-            </React.StrictMode>
+            <motion.div onHoverStart={hoverIn} onHoverEnd={hoverOut} />
         )
 
         let container: any
@@ -32,13 +30,11 @@ describe("hover", () => {
         const promise = new Promise(resolve => {
             const opacity = motionValue(1)
             const Component = () => (
-                <React.StrictMode>
-                    <motion.div
-                        whileHover={{ opacity: 0 }}
-                        transition={{ type: false }}
-                        style={{ opacity }}
-                    />
-                </React.StrictMode>
+                <motion.div
+                    whileHover={{ opacity: 0 }}
+                    transition={{ type: false }}
+                    style={{ opacity }}
+                />
             )
 
             const { container, rerender } = render(<Component />)
@@ -60,14 +56,12 @@ describe("hover", () => {
             }
             const opacity = motionValue(1)
             const Component = () => (
-                <React.StrictMode>
-                    <motion.div
-                        whileHover="hidden"
-                        variants={variant}
-                        transition={{ type: false }}
-                        style={{ opacity }}
-                    />
-                </React.StrictMode>
+                <motion.div
+                    whileHover="hidden"
+                    variants={variant}
+                    transition={{ type: false }}
+                    style={{ opacity }}
+                />
             )
 
             const { container, rerender } = render(<Component />)
@@ -92,21 +86,19 @@ describe("hover", () => {
             }
             const opacity = motionValue(1)
             const Component = () => (
-                <React.StrictMode>
+                <motion.div
+                    whileHover="hidden"
+                    variants={parent}
+                    transition={{ type: false }}
+                    data-id="hoverparent"
+                >
                     <motion.div
-                        whileHover="hidden"
-                        variants={parent}
+                        variants={child}
+                        style={{ opacity }}
                         transition={{ type: false }}
-                        data-id="hoverparent"
-                    >
-                        <motion.div
-                            variants={child}
-                            style={{ opacity }}
-                            transition={{ type: false }}
-                            data-id="hoverchild"
-                        />
-                    </motion.div>
-                </React.StrictMode>
+                        data-id="hoverchild"
+                    />
+                </motion.div>
             )
 
             let container: any
@@ -135,15 +127,13 @@ describe("hover", () => {
             const onComplete = () => hasMousedOut && resolve(opacity.get())
 
             const Component = ({ onAnimationComplete }: any) => (
-                <React.StrictMode>
-                    <motion.div
-                        whileHover="hidden"
-                        variants={variant}
-                        transition={{ type: false }}
-                        style={{ opacity }}
-                        onAnimationComplete={onAnimationComplete}
-                    />
-                </React.StrictMode>
+                <motion.div
+                    whileHover="hidden"
+                    variants={variant}
+                    transition={{ type: false }}
+                    style={{ opacity }}
+                    onAnimationComplete={onAnimationComplete}
+                />
             )
 
             let container: any
@@ -175,15 +165,13 @@ describe("hover", () => {
             const opacity = motionValue(1)
             const scale = motionValue(1)
             const Component = () => (
-                <React.StrictMode>
-                    <motion.div
-                        whileHover="hovering"
-                        whileTap="tapping"
-                        variants={variant}
-                        transition={{ type: false }}
-                        style={{ opacity, scale }}
-                    />
-                </React.StrictMode>
+                <motion.div
+                    whileHover="hovering"
+                    whileTap="tapping"
+                    variants={variant}
+                    transition={{ type: false }}
+                    style={{ opacity, scale }}
+                />
             )
 
             const { container, rerender } = render(<Component />)
@@ -204,15 +192,13 @@ describe("hover", () => {
                 hidden: { size: 50 },
             }
             const Component = () => (
-                <React.StrictMode>
-                    <motion.div
-                        transformValues={transformValues}
-                        whileHover="hidden"
-                        variants={variant}
-                        transition={{ type: false }}
-                        style={{ size: 100 }}
-                    />
-                </React.StrictMode>
+                <motion.div
+                    transformValues={transformValues}
+                    whileHover="hidden"
+                    variants={variant}
+                    transition={{ type: false }}
+                    style={{ size: 100 }}
+                />
             )
 
             const { container, rerender } = render(<Component />)

src/gestures/__tests__/is-node-or-child.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { render } from "@testing-library/react"
+import { render } from "../../../jest.setup"
 import { isNodeOrChild } from "../utils/is-node-or-child"
 
 describe("isNodeOrChild", () => {

src/gestures/__tests__/pan.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { motion } from "../../"
-import { render } from "@testing-library/react"
+import { render } from "../../../jest.setup"
 import { MockDrag, asyncDrag } from "../../behaviours/__tests__/utils"
 import sync from "framesync"