callstack / react-native-testing-library

🦉 Simple and complete React Native testing utilities that encourage good testing practices.
https://callstack.github.io/react-native-testing-library/
MIT License
3.07k stars 271 forks source link

onEndReached on a FlatList is not being triggered anymore after a fireEvent.scroll #1549

Closed vanGalilea closed 9 months ago

vanGalilea commented 9 months ago

Describe the bug

onEndReached on a FlatList is not being triggered anymore after a fireEvent.scroll

Expected behavior

onEndReached is called the way it used to work before

Steps to Reproduce

Follow this example from the docs. My test was something along the lines of:

import {FlatList, View} from 'react-native';
import {fireEvent, render, screen} from '@testing-library/react-native';

test('scrolls to bottom and loads more items', () => {
  const onEndReached = jest.fn();

  const eventData = {
    nativeEvent: {
      contentOffset: {
        y: 500,
      },
      contentSize: {
        // Dimensions of the scrollable content
        height: 500,
        width: 100,
      },
      layoutMeasurement: {
        // Dimensions of the device
        height: 100,
        width: 100,
      },
    },
  };
  render(
    <FlatList
      data={Array.from({length: 10}, (_, key) => ({key: `${key}`}))}
      renderItem={() => <View style={{height: 100, width: 100}} />}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      testID="flat-list"
      initialNumToRender={5}
    />,
  );
  fireEvent.scroll(screen.getByTestId('flat-list'), eventData);
  expect(onEndReached).toHaveBeenCalled();
});

Screenshots

N/A

Versions

@testing-library/react-native: ^12.4.3 => 12.4.3 
react: 18.2.0 => 18.2.0 
react-native: 0.73.1 => 0.73.1 
react-test-renderer: 18.2.0 => 18.2.0 

Side Note

vanGalilea commented 9 months ago

@mdjastrzebski let me know how this can be fixed and I'd raise a PR, I wanna start somewhere 😅

mdjastrzebski commented 9 months ago

@vanGalilea similar issue has been already solved. See issue #1540 for details and PR #1543 for fix (released in v12.4.2)

mdjastrzebski commented 9 months ago

Note, we might need to update the doc you linked to.

vanGalilea commented 9 months ago

Note, we might need to update the doc you linked to.

I'll raise a PR to update the docs 👍🏻

vanGalilea commented 9 months ago

@mdjastrzebski I see that you removed the Flatlist examples in this commit I've raised this pr #1551 for the time being.

Though I still haven't find a way testing whether onEndReached is being called after simulating a scroll to bottom.

mdjastrzebski commented 9 months ago

@vanGalilea you can try calling fireEvent(element, 'endReached'). It should raise onEndReached event on a FlatList. You might need to experiment with proper event payload though.