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?

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?

• javascript
• react-native
• react-native-testing-library

1 Answer 1

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
    }
})