React Native Testing Library:将FlatList滚动到底部

huangapple go评论52阅读模式
英文:

React Native Testing Library: scroll FlatList to bottom

问题

我有一个 react-native FlatList 组件,其中使用了 onEndReached 事件来加载更多项目。

我正在使用 react-native-testing-library 来测试这个组件。测试如下:

  • 组件已挂载。
  • 请求 10 个项目来自 mockedBackend
  • 期望 FlatList 渲染这 10 个项目。
  • 触发 fireEvent onEndReached 来请求下一页的一些更多项目。
  • 期望 FlatList 渲染新的项目。

测试失败,因为即使 FlatListdata 属性被更新了(我使用了 actwaitFor,按需使用),但 FlatList 没有渲染新项目。

经过一些尝试,我成功使测试通过,当我触发 onScroll 事件滚动到底部并使用硬编码的值。

是否有一种方法可以创建一个辅助函数,以考虑适当的 FlatList 大小来滚动到底部?

改进的辅助函数:

export const scrollListToBottom = (list: ReactTestInstance) => {
  // 修复:改进以获取真实的列表大小
  // 经过一些尝试,这些硬编码的值允许测试通过
  act(() => {
    fireEvent.scroll(list, {
      nativeEvent: {
        contentSize: {height: 500, width: 100},
        contentOffset: {y: 400, x: 0},
        layoutMeasurement: {height: 100, width: 100},
      }
    })
  })

  // 修复:如果 onScroll 完全正常工作,这是否甚至需要?
  act(() => {
    fireEvent(list, 'onEndReached')
  })
}

谢谢。

英文:

I have a react-native FlatList component with onEndReached event used to load more items.

I am testing the component with react-native-testing-library. The test is as follows:

  • Component mounted.
  • Requests 10 items to mockedBackend.
  • Expect FlatList to render those 10 items.
  • fireEvent onEndReached to ask for next page with some more items.
  • Expect FlatList to render new items.

Test was failing because FlatList was not rendering new items even thought FlatList's data property was being updated (I used act and waitFor as needed).

I managed to make the test pass when I fired onScroll event to bottom after some tries with hardcoded values.

Is there a way to make a helper to scroll to bottom taking into account proper FlatList size?

Helper to improve:

export const scrollListToBottom = (list: ReactTestInstance) => {
  // FIXME: improve to get real list size
  // After some tries these hardcoded values allowed to pass the test
  act(() => {
    fireEvent.scroll(list, {
      nativeEvent: {
        contentSize: {height: 500, width: 100},
        contentOffset: {y: 400, x: 0},
        layoutMeasurement: {height: 100, width: 100},
      }
    })
  })

  // FIXME: if onScroll works perfectly is this even needed?
  act(() => {
    fireEvent(list, 'onEndReached')
  })
}

Thank you.

答案1

得分: 1

import { act, fireEvent } from '@testing-library/react-native';

export const scrollListToBottom = async (list) => {
  // Find the scrollable view within the FlatList
  const scrollableView = list.findByProps({ testID: 'flatlist-scrollable' });

  // Get the height of the content within the FlatList
  const contentHeight = scrollableView.props.contentSize.height;

  // Calculate the scroll position to reach the bottom
  const scrollPosition = {
    x: 0, // Horizontal scroll position
    y: contentHeight, // Scroll to the calculated content height
  };

  // Scroll to the calculated position
  await act(async () => {
    fireEvent.scroll(scrollableView, { contentOffset: scrollPosition });
  });

  // Trigger the onEndReached event
  await act(async () => {
    fireEvent(list, 'onEndReached');
  });
};
英文:
import { act, fireEvent } from '@testing-library/react-native';

export const scrollListToBottom = async (list) => {
  // Find the scrollable view within the FlatList
  const scrollableView = list.findByProps({ testID: 'flatlist-scrollable' });

  // Get the height of the content within the FlatList
  const contentHeight = scrollableView.props.contentSize.height;

  // Calculate the scroll position to reach the bottom
  const scrollPosition = {
    x: 0, // Horizontal scroll position
    y: contentHeight, // Scroll to the calculated content height
  };

  // Scroll to the calculated position
  await act(async () => {
    fireEvent.scroll(scrollableView, { contentOffset: scrollPosition });
  });

  // Trigger the onEndReached event
  await act(async () => {
    fireEvent(list, 'onEndReached');
  });
};

huangapple
  • 本文由 发表于 2023年2月8日 19:49:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/75385387.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定