test(useLockScroll): update test (#6292)

src/utils/tests/use-lock-scroll.test.tsx

@@ -1,48 +1,35 @@
-import React, { useRef } from 'react'
-import { render, fireEvent } from 'testing'
+import React, { useRef, createRef } from 'react'
+import { render, fireEvent, screen, createEvent } from 'testing'
 import { useLockScroll } from '../use-lock-scroll'
 
 describe('useLockScroll', () => {
-  test('onTouchMove', async () => {
+  test('use preventDefault when event listener is treated as as passive', () => {
     const handleTouch = jest.fn()
     const TestComponent = () => {
       const divRef = useRef<HTMLDivElement>(null)
 
       useLockScroll(divRef, true)
 
       return (
-        <div
-          ref={divRef}
-          data-testid='lock'
-          style={{
-            height: 200,
-            overflow: 'scroll',
-            cursor: 'grab',
-            touchAction: 'none',
-          }}
-          onTouchMove={handleTouch}
-        >
-          {new Array(10).fill({}).map((_, i) => (
-            <h1 key={i}> Test component {i}</h1>
-          ))}
+        <div ref={divRef} onTouchMove={handleTouch}>
+          div
         </div>
       )
     }
 
-    const { getByTestId } = render(<TestComponent />)
+    render(<TestComponent />)
 
-    const testEl = getByTestId('lock')
+    const el = screen.getByText('div')
+    const fn = jest.fn()
 
-    fireEvent.touchStart(testEl, {
-      touches: [{ clientX: 0, clientY: 0 }],
-    })
-    fireEvent.touchMove(testEl, {
-      touches: [{ clientX: 0, clientY: 200 }],
-    })
-    fireEvent.touchEnd(testEl, {
+    const event = createEvent.touchMove(el, {
       touches: [{ clientX: 0, clientY: 400 }],
     })
+    Object.defineProperty(event, 'preventDefault', {
+      value: fn,
+    })
+    fireEvent(el, event)
 
-    expect(handleTouch).toHaveBeenCalled()
+    expect(fn).toBeCalled()
   })
 })