How to unit test PanResponder in React Native? - unit-testing

Question

I am working on a React Native component handling gestures via PanResponder.
I would like to test that when certain dx, dy values are passed to the onPanResponderRelease method, expected action will be executed. Please find below an example of what I would like to test:
export default class MyComponent extends Component<Props, State> {
constructor(props: Props) {
super(props);
this._panResponder = this._initPanResponder();
}
_initPanResponder(): PanResponder {
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null,
{ dx: this._animation.x, dy: this._animation.y }
]),
onPanResponderRelease: (e, gestureState) => {
const { dx, dy } = gestureState;
if (dy > 100) {
doSomething(); // <---- what I would like to unit test
}
}
});
return panResponder;
}
}
Is there any straightforward way to unit test the following with Jest?

Answer 1

I tend to leave testing the wiring code out, since testing an actual PanResponder involves a UI test that is hard to write, is usually flaky, and gives little value.
What you can do, is extract the event handling function out, and test it independently.
In that case, the test would very simple, as all you need to do is invoke the handler in the test and see you're getting what you expected.

Answer 2

If you want to test user's interection with the component you should mock PanResponder in a way you forward the functions given as params to PanResponder.create to the panHandlers it returns.
// setup-tests.ts
jest.doMock('react-native', () => {
return Object.setPrototypeOf(
PanResponder: {
...ReactNative.PanResponder,
create: (config: any) => ({ panHandlers: config }),
},
},
ReactNative
);
});
Tha way, when yoou spread panHandlers in the View you are handling Pan, you can access the functions the way you set up in the file
// pan-handling-component.tsx
const Component: React.FC = () => {
...
const panResponder = React.useRef(
PanResponder.create({
...
onPanResponderMove: (_, gestureState) => {
Animated.event([slideAnim], { useNativeDriver: false })(
gestureState.moveY
);
},
onPanResponderTerminationRequest: () => true,
onPanResponderRelease: () => {
// #ts-ignore
const currentValue = slideAnim._value;
if (currentValue < 0) {
slideIn();
} else if (currentValue > height - 300) {
handleClose();
}
},
})
).current;
...
return (
<View
testID={DRAWER_WRAPPER_TESTID}
{...panResponder.panHandlers}
>
...
</View>
);
And, finally, the unit test would be something like this
// pan-handling-component.test.tsx
...
const panHandler = instance.root.findByProps({
testID: DRAWER_WRAPPER_TESTID,
});
act(() => {
panHandler.props.onPanResponderMove(eventMock, gestureStateMOck);
panHandler.props.onPanResponderRelease();
});
...