javascript - Testing onScroll event in FlatList - Stack Overflow

admin管理员组

文章数量:1384263

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

Share Improve this question Follow edited Apr 8, 2022 at 19:28 juliomalves 50.6k2323 gold badges178178 silver badges169169 bronze badges asked Jan 26, 2021 at 10:19 Petro IvanenkoPetro Ivanenko 72722 gold badges1111 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptTesting onScroll event in FlatListStack Overflow