`onSnapToItem` not running in Jest environment (or, how to use in Jest)

[bitttttten]

Is this a bug report, a feature request, or a question?

Question!

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] I am following the issue template closely in order to produce a useful bug report.

Environment

{
    "react": "16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-snap-carousel": "^3.9.1",
    "jest": "^26.4.2",
    "jest-expo": "^38.0.2",
}

Question

TL;DR I think: In Jest, _onScroll is never called which means that the "onSnapToItem" callback is never fired.

I have a snap-carousel component that I would like to test the logic happening in onSnapToItem. So I have a button that makes the carousel go forward a step, I can click that and my logic in onSnapToItem is never called. I see the code in this library runs all the way down to triggering the scroll at "_scrollTo". Although the scroll listener, "_onScroll" is never called on the component so none of that other part of the component . I dug into the source and added some logging like:

...

    _onScroll (event) {
        console.log("_onScroll")
        const { callbackOffsetMargin, enableMomentum, onScroll } = this.props;

...

And this console.log is never called!

So my question is, am I able to test this kind of behaviour in Jest? I know it could be a limitation of Jest, or maybe it's me setting up Jest incorrectly. If so then I'll just work something else out 😅

[diegovfeder]

+1 Would love to know about this too. I'm right studying jest + testing library and working on a CarouselComponent.

[dev-andremonteiro]

Any updates on how to test this with jest + testing library ? I have been facing some issues as well.

[McSam94]

I'm facing the same issue. Any update please?

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[chris-hut]

I am also running into this issue on the 4.0.0-beta.6, I think it comes down to the testing environment being similar to android in that it won't have any of the momentum scrolling effects, which means that the onSnapToItem in _onMomentemScrolled Won't be called:

// WARNING: everything in this condition will probably need to be called on _snapToItem as well because:
// 1. `onMomentumScrollEnd` won't be called if the scroll isn't animated
// 2. `onMomentumScrollEnd` won't be called at all on Android when scrolling programmatically
if (nextActiveItem !== this._activeItem) {
  this._activeItem = nextActiveItem;
  onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));

  if (hasSnapped) {
    this._repositionScroll(nextActiveItem);
  }
}

However, on Android we run into this same problem, which we alleviate by manually calling onSnapToItem inside of the _snapToItem:

// On both platforms, `onMomentumScrollEnd` won't be triggered if the scroll isn't animated
// so we need to trigger the callback manually
// On Android `onMomentumScrollEnd` won't be triggered when scrolling programmatically
// Therefore everything critical needs to be manually called here as well, even though the timing might be off
const requiresManualTrigger = !animated || IS_ANDROID;
if (requiresManualTrigger) {
  this._activeItem = index;

  if (fireCallback) {
    onSnapToItem && onSnapToItem(this._getDataIndex(index));
  }

In my tests, mocking Platform.OS to return 'android' with a little:

jest.mock('react-native/Libraries/Utilities/Platform', () => {
  const Platform = jest.requireActual(
    'react-native/Libraries/Utilities/Platform',
  );
  Platform.OS = 'android';
  return Platform;
});

Causes my onSnapToItem to be called!

I kinda hate this as this feels like it could break at any moment, but I can't see another way around this, and I don't think this library is actively under development.