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