Closed j-piasecki closed 7 months ago
@j-piasecki Hmmm, I'm quite surprised to learn that fireEvent.scroll
did update anything in any RN version 🧐
Fire Event API is very simple and works by finding a matching event handler (here: onScroll
) and invoking it with the supplied parameters. The fact that it did work in RN 0.72 would suggest that RN itself (or some mock provided by RN) would provide an onScroll
event handler on host ScrollView
rendered by composite FlatList
, which in turn triggered some FlatList
logic.
Fire Event API is not intended for RN env simulation, for that purpose, we have created the User Event API. Take a look at the scrollTo
function, which should provide much better simulation by emitting multiple scroll-related events trying to mimic RN runtime behavior. Be aware that the current implementation of it is quite basic and has been based only on plain ScrollView
interactions. However, it should emit both onScroll
as well as onContentSizeChange
. If you have knowledge and interest in supporting this feature in FlatList
, I would encourage you to submit a PR for that. From my side, I offer help in reviewing the code and explaining RNTL intricacies if necessary.
Fire Event API is very simple and works by finding a matching event handler (here: onScroll) and invoking it with the supplied parameters. The fact that it did work in RN 0.72 would suggest that RN itself (or some mock provided by RN) would provide an onScroll event handler on host ScrollView rendered by composite FlatList, which in turn triggered some FlatList logic.
That's exactly what's been happening. VirtualizedList
was updating its content length inside onScroll
handler, but is no longer doing that since 0.73.
Fire Event API is not intended for RN env simulation, for that purpose, we have created the User Event API. Take a look at the scrollTo function, which should provide much better simulation by emitting multiple scroll-related events trying to mimic RN runtime behavior.
Thanks! I'll look into that more.
If you have knowledge and interest in supporting this feature in FlatList, I would encourage you to submit a PR for that. From my side, I offer help in reviewing the code and explaining RNTL intricacies if necessary.
It's possible that scrollTo
already handles that - the docs mention that it should work with FlashList
. I'll get back to this issue after some testing.
I've looked into this more, and it seems like scrollTo
doesn't handle that case 😞. I think the reason is twofold:
scrollTo
builds scroll events, it passes zeros to all properties except contentOffset
- main offenders here are contentSize
and layoutMeasurement
: https://github.com/callstack/react-native-testing-library/blob/3ba97e35b904f385644d35a5d78cc3ed583f81ac/src/user-event/event-builder/scroll-view.ts#L21-L25VirtualizedList
no longer handles contentSize
inside its onScroll
handler, meaning that its onContentSizeChange
handler also would need to be invoked. Normally, this is done by ScrollView
inside its onLayout
callback, however the ScrollView
is mocked and doesn't handle onLayout
at all.At this point, I'm not sure whether it should be handled by the library or by the users on a case-by-case basis, since it's necessary only for VirtualizedLists and the documentation clearly states that it focuses on the host ScrollView
component.
@j-piasecki we could extend scrollTo
API to allow passing contentSize
& layoutMeasurement
. If not passed they would default to zero.
we could extend
scrollTo
API to allow passingcontentSize
&layoutMeasurement
. If not passed they would default to zero.
That would be great! This change alone should make it work with VirtualizedLists
for RN 0.72 and below, however for 0.73 triggering onContentSizeChange
is also required. Do you think it should be included in the scrollTo
API or should that be a user's responsibility?
Here's how we could implement this:
user would optionally pass contentSize
and layoutMeasurement
values to scrollTo
call:
await userEvent.scrollTo(flatlist, {
y: 480,
contentSize: { height: 480, width: 240 },
layoutMeasurement: { height: 480, width: 240 },
});
User Event would pass relevant values to proper individual events.
Both values seem to be stable for the duration of user interaction, so we just forward them. If User Event lacks certain event in the sequence, the we could as them.
@j-piasecki Would you be able to submit a PR for that?
Sorry for the delay, the PR is up
Describe the bug
Since https://github.com/facebook/react-native/pull/38529 React Native's
VirtualizedList
doesn't update itscontentLength
when handling thescroll
event. This means that usingfireEvent.scroll(...)
is not enough to render items outside theinitialNumToRender
- invokingonContentSizeChange
is also necessary.Expected behavior
Steps to Reproduce
Try the following snippet on RN 0.72 and 0.73. Without the commented-out line, the test will be failing on 73 but not on 72.
Screenshots
Versions