`fireEvent.scroll` doesn't update the FlatList's render window on React Native 0.73 about react-native-testing-library HOT 7 CLOSED

Sorry for the delay, the PR is up

from react-native-testing-library.

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.

from react-native-testing-library.

Here's how we could implement this:

1. 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 },
  });

2. 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?

from react-native-testing-library.

@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.

from react-native-testing-library.

I've looked into this more, and it seems like scrollTo doesn't handle that case 😞. I think the reason is twofold:

1. When scrollTo builds scroll events, it passes zeros to all properties except contentOffset - main offenders here are contentSize and layoutMeasurement:

   react-native-testing-library/src/user-event/event-builder/scroll-view.ts

   Lines 21 to 25 in 3ba97e3

   	contentSize: { height: 0, width: 0 },
   	layoutMeasurement: {
   	height: 0,
   	width: 0,
   	},

2. Because of the change mentioned in the issue description, VirtualizedList 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.

from react-native-testing-library.

@j-piasecki we could extend scrollTo API to allow passing contentSize & layoutMeasurement. If not passed they would default to zero.

from react-native-testing-library.

we could extend scrollTo API to allow passing contentSize & 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?

from react-native-testing-library.