"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.

[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

[hectorzea]

i didnt find any solution for testing on jest selects from shadcn / radix primitives even with mocking some DOM events.

By adding this config on jest tests start to run into an infinite loop... maybe atm its just doing UI testing for this kind of components.

[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.