Testing onScroll event in FlatList

user_14110050 0
Viewed 2637

I have been trying to test onScroll event of a FlatList, with this very simple test files:

Test file:

// @ts-nocheck
import React from 'react';
import { fireEvent, render } from '@testing-library/react-native';
import { MyComponent } from '../../../src/modules/MyComponent';

describe('MyComponent', () => {
  it('should not call if IS_IOS is false', async () => {
    const { debug, getByTestId } = render(<MyComponent/>);

    fireEvent(getByTestId('alpha'), 'onScroll', {
      nativeEvent: {
        contentSize: { height: 600, width: 400 },
        contentOffset: { y: 150, x : 0 }
      }
    })

    debug();
  });
});

Component being tested:

import React from 'react';
import { FlatList, NativeScrollEvent, NativeSyntheticEvent, Text } from 'react-native';

interface Props {}

export const ChatRoomContainer = (props: Props) => {
  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>): void => {};

  return (
    <FlatList
      inverted
      onScroll={ handleScroll }
      data={ [{}, {}, {}] }
      renderItem={ ({ item, index }: { item: any; index: number }) => {
        return <Text>dsafds</Text>;
      } }
      testID={ 'alpha' }
    />
  );
};

As you can see I don't even have any code in my handleScroll method, but nonetheless I keep getting this error:

TypeError: Cannot read property 'height' of undefined

   8 |     const { debug, getByTestId } = render(<ChatRoomContainer>asdasd</ChatRoomContainer>);
   9 | 
> 10 |     fireEvent(getByTestId('alpha'), 'onScroll', {
     |     ^
  11 |       nativeEvent: {
  12 |         contentSize: { height: 600 },
  13 |         contentOffset: { y: 150 }

How do I fix this error and test my handleSCroll?

react-native-testing-library react-native javascript
1 Answers

The error happens because the event data is missing the layoutMeasurement field, which sets the dimensions of the device. Also, unrelated to the issue, I'd suggest using fireEvent.scroll to trigger the scroll action.

fireEvent.scroll(getByTestId('alpha'), {
    nativeEvent: {
        contentSize: { height: 600, width: 400 },
        contentOffset: { y: 150, x: 0 },
        layoutMeasurement: { height: 100, width: 100 } // Dimensions of the device
    }
})
user_18707800
Related