filterTaps disables all click events in Jest

[jantimon]

Describe the bug

the filterTaps option works great in all browser however in JEST it prevents child listeners from working.

I am only guessing but maybe the following line doesn't work well as JEST is not able to get real size measurements:

use-gesture/packages/core/src/engines/DragEngine.ts

Line 210 in 9217f29

state.tap = dx <= 3 && dy <= 3

Sandbox or Video

I prepared this CodeSandbox with unit tests.

It contains Demo1 and Demo2:

import { useDrag } from '@use-gesture/react'

export const Demo1 = ({onClick}: {onClick: () => void}) => {
  const bind = useDrag(({ down, movement: [mx, my] }) => {
  }, {

  })
  return <div {...bind()}>
      <button onClick={onClick}>
      click me
      </button>
    </div>

import { useDrag } from '@use-gesture/react'

export const Demo2 = ({onClick}: {onClick: () => void}) => {
  const bind = useDrag(({ down, movement: [mx, my] }) => {
  }, {
    filterTaps: true
  })
  return <div {...bind()}>
      <button onClick={onClick}>
      click me
      </button>
    </div>
}

As you can see the only difference is filterTaps: true.

The result is that the unit test which tries to click the button fails for Demo2:

Checklist:

• I've read the documentation.

[dbismut]

Hey, thanks for reporting this.

The filterTaps option checks if the drag is an actual drag or a tap (it does this by checking whether the displacement is greater than 3px). If the drag is a drag, then it prevents the click event to propagate (the click listener is added using capture: true so that events bubble down).

use-gesture/packages/core/src/engines/DragEngine.ts

Lines 231 to 236 in 9217f29

	pointerClick(event: MouseEvent) {
	if (!this.state.tap) {
	event.preventDefault()
	event.stopPropagation()
	}
	}

So I'm not sure how I would be able to solve this. Shouldn't this be a bug in Jest instead?

[jantimon]

After some further investigation I found out that fireEvent.click does not trigger mouseDown and mouseUp therefore state.tap is always false

There is a helper library which triggers a full click which works:

import userEvent from '@testing-library/user-event';

userEvent.click()

Could we set state.taps = true by default?

[dbismut]

Oh right.

You mean setting state.tap = false on pointerDown then?

I'd have to make sure there's no collaterals.

[jantimon]

Rather here:

use-gesture/packages/core/src/engines/DragEngine.ts

Line 29 in 9217f29

state.tap = false

For normal browsers this shouldn't have any effect as it will be set to a correct value in pointerUp.
However for JEST where there is no pointerUp it would allow to catch click events.

[dbismut]

Yes, that's what I meant, but I would have to restore state.tap to a falsy value as soon as the gesture starts, as people might rely on it before pointerUp. In any case it wouldn't make sense to have state.tap = true when the user drags things around.

[jantimon]

Oh I see - good point

[marcusstenbeck]

For anyone coming here wanting to trigger the tap, try this:

fireEvent.mouseDown(element, { buttons: 1 });
fireEvent.mouseUp(element, { buttons: 1 });

See: MDN - MouseEvent.buttons

The mouseUp() call probably doesn't need the { buttons: 1 }, but let's keep it since it means the mouseDown is followed by a mouseUp with the same button.

---

This is a more complete example of what's working for me using v10.2.6.

import { fireEvent } from '@testing-library/react';

const click: typeof fireEvent.click = (element, options) => {
  const _options: Record<string, any> = options ?? {};

  if (!_options.buttons) {
    // default to left mouse button
    // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
    _options.buttons = 1;
  }

  return fireEvent.mouseDown(element, _options) && fireEvent.mouseUp(element, _options);
};

---

Here's how use-gesture tests the tap event: https://github.com/pmndrs/use-gesture/blob/main/test/drag.test.tsx#L232