react-native-gesture-handler icon indicating copy to clipboard operation
react-native-gesture-handler copied to clipboard

Gesture handler is not initialized properly in tests when conditionally rendering

Open jonathanj opened this issue 5 months ago • 2 comments

Description

Upgrading my app to React Native 0.77, and react-native-gesture-handler from 2.24.0 to 2.25.0 (I tried 2.26.0 and 2.27.0 too, they also fail) I noticed some tests failing that involved gesture handlers. After a lot of head scratching and tracing through RNGH internals, I managed to make this minimal reproduction.

The handlerTag is initialized to -1 and initially rendered as such in the component from createHandler. Then later in componentDidMount the handler is attached and this.handlerTag is updated.

But in the case where the gesture handler is conditionally rendered, the handlerTag prop isn't updated and thus the event emitted by fireGestureHandler (using a test renderer element instance) will be rejected by the check in onGestureHandlerStateChange:

    const gestureHandlerElem = screen.getByTestId('foo/gesture');
    fireGestureHandler(gestureHandlerElem, [
      {state: State.BEGAN, translationY: 0},
      {state: State.ACTIVE, translationY: 50},
      {state: State.END, translationY: 150},
    ]);

Below is a minimal reproduction that demonstrates that internally handlerTag is not -1 but the prop is still -1. If the first render passes enabled={true} then the tests pass. I realise that there is an enabled prop on PanGestureHandler, but in my real-world case the gesture handler is only attached a few components deeper and there may potentially not be any component tree to always hang it on, so this repro aims to reduce the problem space.

(Caveat: This uses the old PanGestureHandler because I still have a need to use Animated.event instead of switching to reanimated.)

Steps to reproduce

  1. Put the gist code into a Jest test (and import the RNGH jest setup script)
  2. Run the test

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

https://gist.github.com/jonathanj/b6f57eb45171167d3b80c1172d34f830

Gesture Handler version

2.25.0

React Native version

0.77.0

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

jonathanj avatar Jul 15 '25 12:07 jonathanj

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

github-actions[bot] avatar Jul 15 '25 12:07 github-actions[bot]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

FWIW, there is a Gist (which the issue template says is okay), seems like the bot doesn't know about this.

jonathanj avatar Jul 15 '25 12:07 jonathanj