0

I have basically written a code of flatlist and used viewabilityConfigCallbackPairs props. Divided UI code and business logic in separate file. Now the issue is I am trying to write testcase using jest for the same but it seems viewAbilityConfigCallbackPairs does gets called but onViewableItemsChanged not

Here is my code of component, business logic and testcase:

Component:

<FlatList
      testID="list"
      horizontal
      ref={scrollRef}
      getItemLayout={getItemLayout}
      snapToAlignment="start"
      decelerationRate={'fast'}
      viewabilityConfigCallbackPairs={
        viewAbilityConfigCallbackPairs.current
      }
      snapToInterval={width}
      // rest of the code
/>

custom hook:

const viewAbilityConfigCallbackPairs = useRef<ViewabilityConfigCallbackPair[]
>([{viewabilityConfig, onViewableItemsChanged}]);

const onViewableItemsChanged = useCallback(
({viewableItems}: {viewableItems: Array<ViewToken>}) => {
  console.log('useCalendarScreen.ts 2023 viewableItems ',viewableItems);
  setCurrentDate(viewableItems?.[0]?.item);
  setCurrentIndex(viewableItems?.[0]?.index ?? 0);
},
[],
);

Testcase

test('Initial render test case', async () => {
    const {getByTestId} = render(<Component />);
})

Once I run this testcase, it calls other methods from custom hook and it even covers things from viewAbilityConfigCallbackPairs, but does not cover lines from onViewableItemsChanged, however ideally it should be called in first render.

Here is the screenshot of coverage

enter image description here

Ravi
  • 34,851
  • 21
  • 122
  • 183

0 Answers0