"TypeError: target.hasPointerCapture is not a function" on userEvent click #1087
-
|
Hello, I'm writing a test case of when a user clicks a component, but I have this error only on this specific component and I don't know why. I have other components made using radix-ui and same structure, and they work fine.. I'm using: "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",Here is the test code: describe('user interactions', () => {
it('Click Slider', async () => {
const user = userEvent.setup()
const { getByTestId } = renderSlider({
value: [4, 6],
})
const slider = getByTestId(SLIDER_TEST_ID)
await user.click(slider)
})
})The component/* External dependencies */
import React, {
forwardRef,
useState,
useCallback,
useEffect,
} from 'react'
import { noop } from 'lodash-es'
import * as SliderPrimitive from '@radix-ui/react-slider'
/* Internal dependencies */
import SliderProps from './Slider.types'
import * as Styled from './Slider.styled'
export const SLIDER_TEST_ID = 'react-slider'
export const SLIDER_THUMB_TEST_ID = 'react-slider-thumb'
export const Slider = forwardRef(function Slider(
{
width = 36,
guide,
onThumbPointerDown = noop,
onThumbPointerUp = noop,
defaultValue = [5],
value,
disabled = false,
min = 0,
max = 10,
step = 1,
onValueChange = noop,
minStepsBetweenThumbs = 0,
...rest
}: SliderProps,
forwardedRef: React.Ref<HTMLDivElement>,
) {
const [currentValue, setCurrentValue] = useState<number[]>(value ?? defaultValue)
useEffect(function updateCurrentValue() {
if (value) {
setCurrentValue(value)
onValueChange(<
8000
span class="pl-s1">value)
}
}, [
value,
onValueChange,
])
const handleValueChange: (value: number[]) => void = useCallback((_value) => {
setCurrentValue(_value)
onValueChange(_value)
}, [onValueChange])
const handlePointerDown: React.PointerEventHandler<HTMLElement> = useCallback(() => {
if (!disabled) {
onThumbPointerDown(currentValue)
}
}, [
disabled,
onThumbPointerDown,
currentValue,
])
const handlePointerUp: React.PointerEventHandler<HTMLElement> = useCallback(() => {
if (!disabled) {
onThumbPointerUp(currentValue)
}
}, [
disabled,
onThumbPointerUp,
currentValue,
])
return (
<SliderPrimitive.Root
asChild
defaultValue={defaultValue}
value={currentValue}
disabled={disabled}
min={min}
max={max}
step={step}
onValueChange={handleValueChange}
minStepsBetweenThumbs={minStepsBetweenThumbs}
>
<Styled.SliderRoot
ref={forwardedRef}
width={width}
disabled={disabled}
data-testid={SLIDER_TEST_ID}
{...rest}
>
<SliderPrimitive.Track asChild>
<Styled.SliderTrack>
<SliderPrimitive.Range asChild>
<Styled.SliderRange />
</SliderPrimitive.Range>
</Styled.SliderTrack>
</SliderPrimitive.Track>
{ guide?.map((guideValue) => (
<Styled.SliderGuide
key={`slider-guide-${guideValue}`}
min={min}
max={max}
guideValue={guideValue}
/>
)) }
{ currentValue.map((v) => (
<SliderPrimitive.Thumb
asChild
key={`slider-thumb-${v}`}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
>
<Styled.SliderThumb
data-testid={SLIDER_THUMB_TEST_ID}
/>
</SliderPrimitive.Thumb>
)) }
</Styled.SliderRoot>
</SliderPrimitive.Root>
)
})Jest error● Slider › user interactions › Click Slider
TypeError: target.hasPointerCapture is not a function
198 | const slider = getByTestId(SLIDER_TEST_ID)
199 |
> 200 | await user.click(slider)
| ^
201 | })
202 | })
203 | })
at ourEventHandler (../../node_modules/@radix-ui/react-slider/dist/packages/react/slider/src/Slider.tsx:395:22)
at apply (../../node_modules/@radix-ui/primitive/dist/packages/core/primitive/src/primitive.tsx:10:14)
at HTMLUnknownElement.callCallback (../../node_modules/react-dom/cjs/react-dom.development.js:4164:14)
at HTMLUnknownElement.callTheUserObjectsOperation (../../node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
at invokeEventListeners (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (../../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.apply (../../node_modules/react-dom/cjs/react-dom.development.js:4213:16)
at apply (../../node_modules/react-dom/cjs/react-dom.development.js:4277:31)
at invokeGuardedCallbackAndCatchFirstError (../../node_modules/react-dom/cjs/react-dom.development.js:4291:25)
at executeDispatch (../../node_modules/react-dom/cjs/react-dom.development.js:9041:3)
at processDispatchQueueItemsInOrder (../../node_modules/react-dom/cjs/react-dom.development.js:9073:7)
at processDispatchQueue (../../node_modules/react-dom/cjs/react-dom.development.js:9086:5)
at dispatchEventsForPlugins (../../node_modules/react-dom/cjs/react-dom.development.js:9097:3)
at fn (../../node_modules/react-dom/cjs/react-dom.development.js:9288:12)
at batchedUpdatesImpl (../../node_modules/react-dom/cjs/react-dom.development.js:26140:12)
at batchedUpdates (../../node_modules/react-dom/cjs/react-dom.development.js:3991:12)
at dispatchEventForPluginEventSystem (../../node_modules/react-dom/cjs/react-dom.development.js:9287:3)
at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (../../node_modules/react-dom/cjs/react-dom.development.js:6465:5)
at dispatchEvent (../../node_modules/react-dom/cjs/react-dom.development.js:6457:5)
at dispatchContinuousEvent (../../node_modules/react-dom/cjs/react-dom.development.js:6444:5)
at HTMLDivElement.callTheUserObjectsOperation (../../node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
at invokeEventListeners (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLDivElementImpl._dispatch (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLDivElementImpl.dispatchEvent (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLDivElement.dispatchEvent (../../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at cb (../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:43)
at callback (../../node_modules/@testing-library/react/dist/pure.js:79:16)
at callback (../../node_modules/@testing-library/react/dist/act-compat.js:64:24)
at actImplementation (../../node_modules/react/cjs/react.development.js:2512:16)
at ../../node_modules/@testing-library/react/dist/act-compat.js:63:25
at Object.eventWrapper (../../node_modules/@testing-library/react/dist/pure.js:78:5)
at Object.wrapEvent (../../node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:8:28)
at Object.call (../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:22)
at Object.dispatchUIEvent (../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:24:26)
at Object.move (../../node_modules/@testing-library/user-event/dist/cjs/system/pointer/pointer.js:54:26)
at PointerHost.move (../../node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:42:79)
at pointerAction (../../node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:67:39)
at Object.pointer (../../node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:35:15)
at Object.asyncWrapper (../../node_modules/@testing-library/react/dist/pure.js:71:14)
at Object.<anonymous> (src/components/Forms/Slider/Slider.test.tsx:200:7) |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 9 replies
-
|
Your DOM implementation (Jsdom) does not implement |
Beta Was this translation helpful? Give feedback.
-
|
@sagunji 's example wasn't quite copy-pastable for me, I just had to do a minor tweak window.PointerEvent = class PointerEvent extends Event {};
window.HTMLElement.prototype.scrollIntoView = vi.fn();
window.HTMLElement.prototype.hasPointerCapture = vi.fn();
window.HTMLElement.prototype.releasePointerCapture = vi.fn(); |
Beta Was this translation helpful? Give feedback.
-
|
This mock causes another errors … I have added it and my “submit” buttons stoped work. Also, I had an infinity loops for some tests… I’m trying ti test the select inside the modal. |
Beta Was this translation helpful? Give feedback.
-
|
I use vitest and jsdom |
Beta Was this translation helpful? Give feedback.
-
|
above solution breaks pointer event on Submit button. Any advices how to keep buttons clickable with above approach? |
Beta Was this translation helpful? Give feedback.
-
Yes, with this code, submit event break |
Beta Was this translation helpful? Give feedback.
-
|
Mocking like this also worked for me: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, worked for me also, better than the others above. |
Beta Was this translation helpful? Give feedback.
Your DOM implementation (Jsdom) does not implement
Element.hasPointerCapture()which your component library (Radix Slider) uses.