"TypeError: target.hasPointerCapture is not a function" on userEvent click

[guswnsxodlf]

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(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)

[ph-fritsche]

Your DOM implementation (Jsdom) does not implement Element.hasPointerCapture() which your component library (Radix Slider) uses.

[equal-matt]

@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();

[BorysShulyak]

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.
I use Radix ui for all the components. Unfortunately, I have not found the solution

[BorysShulyak]

I use vitest and jsdom

[nurbolnygmanov]

above solution breaks pointer event on Submit button. Any advices how to keep buttons clickable with above approach?

[mateusp7]

above solution breaks pointer event on Submit button. Any advices how to keep buttons clickable with above approach?

Yes, with this code, submit event break

[migle-sapiens]

Mocking like this also worked for me:
window.HTMLElement.prototype.hasPointerCapture = jest.fn();

[cezar-tech]

Thanks, worked for me also, better than the others above.