在 FlatList 中测试 onScroll 事件

问题描述

我一直在尝试使用这个非常简单的测试文件来测试 onScroll 的 FlatList 事件：

测试文件：

// @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();
  });
});

正在测试的组件：

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' }
    />
  );
};

如您所见，我的 handleScroll 方法中甚至没有任何代码，但我仍然收到此错误：

TypeError: Cannot read property 'height' of undefined

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

如何修复此错误并测试我的 handleSCroll？

提前感谢您的时间！

解决方法

发生错误的原因是事件数据缺少设置设备尺寸的 layoutMeasurement 字段。此外，与该问题无关，我建议使用 fireEvent.scroll 来触发滚动操作。

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