英文:
React Native Testing Library: scroll FlatList to bottom
问题
我有一个 react-native FlatList
组件,其中使用了 onEndReached
事件来加载更多项目。
我正在使用 react-native-testing-library
来测试这个组件。测试如下:
- 组件已挂载。
- 请求 10 个项目来自
mockedBackend
。 - 期望
FlatList
渲染这 10 个项目。 - 触发
fireEvent
onEndReached
来请求下一页的一些更多项目。 - 期望
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
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');
});
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论