feat: add fireEvent.scroll support for scroll native events

Author: mdjastrzebski

src/fire-event.ts

@@ -8,10 +8,10 @@ import {
 } from 'react-native';
 import act from './act';
 import { isHostElement } from './helpers/component-tree';
-import { isHostTextInput } from './helpers/host-component-names';
+import { isHostScrollView, isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
 import { isTextInputEditable } from './helpers/text-input';
-import { StringWithAutocomplete } from './types';
+import { Point, StringWithAutocomplete } from './types';
 import { nativeState } from './native-state';
 
 type EventHandler = (...args: unknown[]) => unknown;
@@ -147,6 +147,14 @@ fireEvent.scroll = (element: ReactTestInstance, ...data: unknown[]) =>
 
 export default fireEvent;
 
+const scrollEventNames = new Set([
+  'scroll',
+  'scrollBeginDrag',
+  'scrollEndDrag',
+  'momentumScrollBegin',
+  'momentumScrollEnd',
+]);
+
 function setNativeStateIfNeeded(element: ReactTestInstance, eventName: string, value: unknown) {
   if (
     eventName === 'changeText' &&
@@ -156,4 +164,30 @@ function setNativeStateIfNeeded(element: ReactTestInstance, eventName: string, v
   ) {
     nativeState.valueForElement.set(element, value);
   }
+
+  if (scrollEventNames.has(eventName) && isHostScrollView(element)) {
+    const contentOffset = tryGetContentOffset(value);
+    if (contentOffset) {
+      nativeState.contentOffsetForElement.set(element, contentOffset);
+    }
+  }
+}
+
+function tryGetContentOffset(value: unknown): Point | null {
+  try {
+    // @ts-expect-error: try to extract contentOffset from the event value
+    const contentOffset = value?.nativeEvent?.contentOffset;
+    const x = contentOffset?.x;
+    const y = contentOffset?.y;
+    if (typeof x === 'number' || typeof y === 'number') {
+      return {
+        x: Number.isFinite(x) ? x : 0,
+        y: Number.isFinite(y) ? y : 0,
+      };
+    }
+  } catch {
+    // Do nothing
+  }
+
+  return null;
 }

src/helpers/matchers/match-label-text.ts

@@ -18,10 +18,10 @@ export function matchLabelText(
 
 function matchAccessibilityLabel(
   element: ReactTestInstance,
-  extpectedLabel: TextMatch,
+  expectedLabel: TextMatch,
   options: TextMatchOptions,
 ) {
-  return matches(extpectedLabel, computeAriaLabel(element), options.normalizer, options.exact);
+  return matches(expectedLabel, computeAriaLabel(element), options.normalizer, options.exact);
 }
 
 function matchAccessibilityLabelledBy(

src/user-event/scroll/__tests__/scroll-to.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ScrollView, ScrollViewProps, View } from 'react-native';
 import { EventEntry, createEventLogger } from '../../../test-utils';
-import { render, screen } from '../../..';
+import { fireEvent, render, screen } from '../../..';
 import { userEvent } from '../..';
 
 function mapEventsToShortForm(events: EventEntry[]) {
@@ -123,6 +123,24 @@ describe('scrollTo()', () => {
     ]);
   });
 
+  test('remembers previous scroll offset from "fireEvent.scroll"', async () => {
+    const { events } = renderScrollViewWithToolkit();
+    const user = userEvent.setup();
+
+    fireEvent.scroll(screen.getByTestId('scrollView'), {
+      nativeEvent: { contentOffset: { y: 100 } },
+    });
+    await user.scrollTo(screen.getByTestId('scrollView'), { y: 200 });
+    expect(mapEventsToShortForm(events)).toEqual([
+      ['scroll', 100, undefined],
+      ['scrollBeginDrag', 100, 0],
+      ['scroll', 125, 0],
+      ['scroll', 150, 0],
+      ['scroll', 175, 0],
+      ['scrollEndDrag', 200, 0],
+    ]);
+  });
+
   it('validates vertical scroll direction', async () => {
     renderScrollViewWithToolkit();
     const user = userEvent.setup();