我正在使用Flatlist中的onViewableItemsChanged属性。功能按预期工作,但当我对相同的功能执行单元测试时,我可以看到函数正在被调用,但在执行单元测试时,函数内部的语句没有被执行。
app.js
const onViewableItemsChanged = React.useCallback(
({ viewableItems, changed, viewabilityConfig }) => {
setActiveIndex(viewableItems);
},
[],
);
const setActiveIndex = (activeViews) => {
if (activeViews?.length !== 0) {
let index = activeViews[0]?.index;
setActiveViewIndex(index);
}
};
return(
<View>
<View>
<FlatList
data={checkedInPersonsList}
horizontal
showsHorizontalScrollIndicator={false}
style={{ flexGrow: 0 }}
contentContainerStyle={{
paddingHorizontal: containerHorizontalPadding,
}}
renderItem={({ item, index }) =>
renderFlatList(item, index, checkedInPersonsList)
}
// onScroll={onScroll}
onViewableItemsChanged={onViewableItemsChanged}
viewabilityConfig={{
itemVisiblePercentThreshold: 92,
}}
ItemSeparatorComponent={() => (
<View style={{ paddingHorizontal: 10 }} />
)}
testID={'PaxScrollerFlatList.test'}
/>
</View>
</View>
)
app.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import PaxScroller from './index';
describe('Pax Scroller', () => {
test('Scroll Flatlist Horizontal', () => {
const { getAllByTestId, getByTestId } = render(
<PaxScroller checkedInPersonsList={list} />,
);
let fList = getByTestId('PaxScrollerFlatList.test');
fireEvent.scroll(fList, {
nativeEvent: {
contentSize: { height: 600, width: 600 },
contentOffset: { y: 0, x: 0 },
layoutMeasurement: { height: 100, width: 400 },
},
});
});
}
在执行测试用例之后,我可以在测试覆盖率中看到onViewableItemsChanged被调用,但是内部语句没有被执行。有没有一种方法可以执行这些用红色突出显示的语句?
请帮我执行内部声明。
1条答案
按热度按时间njthzxwz1#
我相信,如果你想在FlatList中触发
onViewableItemsChanged
的处理程序,你必须:fireEvent.scroll
模拟滚动事件比如:
看看这些文档。
这可能是端到端测试更适合的情况。