New list items are not rendered after scrolling in unit test

[robianmcd]

Current behavior

I'm trying to unit test a component that uses FlashList but when I scroll to an item, it doesn't change items being rendered.

My test renders a list with 4 items but only the first 3 are rendered because the list is 900px high and each item is 300px high.

Scrolling down with the FlashList function scrollToIndex() does not change the items rendered on screen.

Note: I do see the expected y value for each item if I log out flashListRef.current?.rlvRef?.getLayout(scrollIndex) (0 for item 1, 300 for item 2, 600 for item 3 and 900 for item 4)

Expected behavior

After scrolling down item 4 should be rendered

To Reproduce

interface TestItem {
  id: number;
  text: string;
}

const TEST_DATA = [
  {id: 1, text: 'one'},
  {id: 2, text: 'two'},
  {id: 3, text: 'three'},
  {id: 4, text: 'four'},
]

interface TestItemProps {
  id: number;
  text: string;
}

const TestItem = ({text}: TestItemProps) => {
  return (
    <Box height={300}>
      <Text>{text}</Text>
    </Box>
  )
}

const TestComponent = () => {
  const flashListRef = useRef<FlashList<TestItem>>(null);

  const [scrollIndex, setScrollIndex] = useState(0);

  const renderItem = useCallback(({item}) => {
    return (<TestItem id={item.id} text={item.text} />);
  }, []);

  const scrollDown = useCallback(() => {
    console.log('Scrolling down', flashListRef.current?.rlvRef?.getLayout(scrollIndex));
    flashListRef.current?.scrollToIndex({index: scrollIndex + 1});
    setScrollIndex(scrollIndex + 1);
  }, [flashListRef, setScrollIndex, scrollIndex]);

  //Container height is hard coded to 900 in "@shopify/flash-list/jestSetup"
  return (
    <Box>
      <Box height={900}>
        <FlashList
          ref={flashListRef}
          data={TEST_DATA}
          estimatedItemSize={300}
          renderItem={renderItem}
        />
      </DSBox>
      <DSButton onPress={scrollDown}>Scroll Down</DSButton>
    </DSBox>
  )
}

describe('MyComponent', () => {
  it('should render item 4 after scrolling', async () => {
    render(<TestComponent/>);

    const scrollDownButton = screen.getByRole('button');
    fireEvent.press(scrollDownButton);
    fireEvent.press(scrollDownButton);
    fireEvent.press(scrollDownButton);

    await waitFor(() => {
      expect(screen.getByText('four')).toBeTruthy();
    });
  });
})

Platform:

• iOS
• Android

Environment

1.6.3