英文:
React Native Testing Library: scroll FlatList to bottom
问题
我有一个 react-native FlatList 组件,其中使用了 onEndReached 事件来加载更多项目。
我正在使用 react-native-testing-library 来测试这个组件。测试如下:
- 组件已挂载。
- 请求 10 个项目来自
mockedBackend。 - 期望
FlatList渲染这 10 个项目。 - 触发
fireEventonEndReached来请求下一页的一些更多项目。 - 期望
FlatList渲染新的项目。
测试失败,因为即使 FlatList 的 data 属性被更新了(我使用了 act 和 waitFor,按需使用),但 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
FlatListto render those 10 items. fireEventonEndReachedto ask for next page with some more items.- Expect
FlatListto 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');
});
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论