@testing-library/react-native 12.1.3 → 12.2.0

package/experiments-app/.expo/settings.json

@@ -5,5 +5,6 @@
   "minify": false,
   "urlRandomness": null,
   "https": false,
-  "scheme": null
+  "scheme": null,
+  "devClient": false
 }

package/experiments-app/src/screens/TextInputEvents.tsx

@@ -7,7 +7,12 @@ const handlePressOut = buildEventLogger('pressOut');
 const handleFocus = buildEventLogger('focus');
 const handleBlur = buildEventLogger('blur');
 const handleChange = buildEventLogger('change');
+const handleEndEditing = buildEventLogger('endEditing');
 const handleSubmitEditing = buildEventLogger('submitEditing');
+const handleKeyPress = buildEventLogger('keyPress');
+const handleTextInput = buildEventLogger('textInput');
+const handleSelectionChange = buildEventLogger('selectionChange');
+const handleContentSizeChange = buildEventLogger('contentSizeChange');
 
 export function TextInputEvents() {
   const [value, setValue] = React.useState('');
@@ -29,7 +34,12 @@ export function TextInputEvents() {
         onFocus={handleFocus}
         onBlur={handleBlur}
         onChange={handleChange}
+        onEndEditing={handleEndEditing}
         onSubmitEditing={handleSubmitEditing}
+        onKeyPress={handleKeyPress}
+        onTextInput={handleTextInput}
+        onSelectionChange={handleSelectionChange}
+        onContentSizeChange={handleContentSizeChange}
       />
     </SafeAreaView>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/react-native",
-  "version": "12.1.3",
+  "version": "12.2.0",
   "description": "Simple and complete React Native testing utilities that encourage good testing practices.",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/__tests__/act.test.tsx

@@ -50,3 +50,7 @@ test('should be able to await act', async () => {
   const result = await act(async () => {});
   expect(result).toBe(undefined);
 });
+
+test('should be able to await act when promise rejects', async () => {
+  await expect(act(async () => Promise.reject('error'))).rejects.toBe('error');
+});

package/src/fireEvent.ts

@@ -7,16 +7,12 @@ import {
   ScrollViewProps,
 } from 'react-native';
 import act from './act';
-import { isHostElement } from './helpers/component-tree';
-import { getHostComponentNames } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
+import { isHostElement } from './helpers/component-tree';
+import { isHostTextInput } from './helpers/host-component-names';
 
 type EventHandler = (...args: unknown[]) => unknown;
 
-const isHostTextInput = (element?: ReactTestInstance) => {
-  return element?.type === getHostComponentNames().textInput;
-};
-
 export function isTouchResponder(element: ReactTestInstance) {
   if (!isHostElement(element)) {
     return false;

package/src/helpers/deprecation.ts

@@ -37,7 +37,7 @@ function deprecateQuery<QueryFn extends (...args: any) => any>(
 
 const warned: { [functionName: string]: boolean } = {};
 
-// istambul ignore next: Occasionally used
+/* istanbul ignore next: occasionally used */
 export function printDeprecationWarning(functionName: string) {
   if (warned[functionName]) {
     return;

package/src/helpers/host-component-names.tsx

@@ -65,3 +65,11 @@ function getByTestId(instance: ReactTestInstance, testID: string) {
 
   return nodes[0];
 }
+
+export function isHostText(element?: ReactTestInstance) {
+  return element?.type === getHostComponentNames().text;
+}
+
+export function isHostTextInput(element?: ReactTestInstance) {
+  return element?.type === getHostComponentNames().textInput;
+}

package/src/pure.ts

@@ -14,6 +14,7 @@ export {
 export { getDefaultNormalizer } from './matches';
 export { renderHook } from './renderHook';
 export { screen } from './screen';
+export { userEvent } from './user-event';
 
 export type {
   RenderOptions,
@@ -23,3 +24,4 @@ export type {
 } from './render';
 export type { RenderHookOptions, RenderHookResult } from './renderHook';
 export type { Config } from './config';
+export type { UserEventConfig } from './user-event';

package/src/user-event/event-builder/common.ts

@@ -1,24 +1,40 @@
+/**
+ * Experimental values:
+ * - iOS: `{"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928682.0450834, "touches": [[Circular]]}`
+ * - Android: `{"changedTouches": [[Circular]], "identifier": 0, "locationX": 160, "locationY": 40.3636360168457, "pageX": 180, "pageY": 140.36363220214844, "target": 53, "targetSurface": -1, "timestamp": 10290805, "touches": [[Circular]]}`
+ */
+function touch() {
+  return {
+    persist: jest.fn(),
+    currentTarget: { measure: jest.fn() },
+    nativeEvent: {
+      changedTouches: [],
+      identifier: 0,
+      locationX: 0,
+      locationY: 0,
+      pageX: 0,
+      pageY: 0,
+      target: 0,
+      timestamp: Date.now(),
+      touches: [],
+    },
+  };
+}
+
 export const CommonEventBuilder = {
-  /**
-   * Experimental values:
-   * - iOS: `{"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928682.0450834, "touches": [[Circular]]}`
-   * - Android: `{"changedTouches": [[Circular]], "identifier": 0, "locationX": 160, "locationY": 40.3636360168457, "pageX": 180, "pageY": 140.36363220214844, "target": 53, "targetSurface": -1, "timestamp": 10290805, "touches": [[Circular]]}`
-   */
-  touch: () => {
+  touch,
+
+  responderGrant: () => {
     return {
-      persist: jest.fn(),
-      currentTarget: { measure: jest.fn() },
-      nativeEvent: {
-        changedTouches: [],
-        identifier: 0,
-        locationX: 0,
-        locationY: 0,
-        pageX: 0,
-        pageY: 0,
-        target: 0,
-        timestamp: Date.now(),
-        touches: [],
-      },
+      ...touch(),
+      dispatchConfig: { registrationName: 'onResponderGrant' },
+    };
+  },
+
+  responderRelease: () => {
+    return {
+      ...touch(),
+      dispatchConfig: { registrationName: 'onResponderRelease' },
     };
   },
 

package/src/user-event/event-builder/index.ts

@@ -1,5 +1,7 @@
 import { CommonEventBuilder } from './common';
+import { TextInputEventBuilder } from './text-input';
 
 export const EventBuilder = {
   Common: CommonEventBuilder,
+  TextInput: TextInputEventBuilder,
 };

package/src/user-event/event-builder/text-input.ts

@@ -0,0 +1,86 @@
+import { ContentSize } from '../utils/content-size';
+import { TextRange } from '../utils/text-range';
+
+export const TextInputEventBuilder = {
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"eventCount": 6, "target": 53, "text": "Tes"}`
+   */
+  change: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0, eventCount: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 3, "key": "a", "target": 75}`
+   * - Android: `{"key": "a"}`
+   */
+  keyPress: (key: string) => {
+    return {
+      nativeEvent: { key },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"target": 53, "text": "Test"}`
+   */
+  submitEditing: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"target": 53, "text": "Test"}`
+   */
+  endEditing: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"selection": {"end": 4, "start": 4}, "target": 75}`
+   * - Android: `{"selection": {"end": 4, "start": 4}}`
+   */
+  selectionChange: ({ start, end }: TextRange) => {
+    return {
+      nativeEvent: { selection: { start, end } },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 2, "previousText": "Te", "range": {"end": 2, "start": 2}, "target": 75, "text": "s"}`
+   * - Android: `{"previousText": "Te", "range": {"end": 2, "start": 0}, "target": 53, "text": "Tes"}`
+   */
+  textInput: (text: string, previousText: string) => {
+    return {
+      nativeEvent: {
+        text,
+        previousText,
+        range: { start: text.length, end: text.length },
+        target: 0,
+      },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"contentSize": {"height": 21.666666666666668, "width": 11.666666666666666}, "target": 75}`
+   * - Android: `{"contentSize": {"height": 61.45454406738281, "width": 352.7272644042969}, "target": 53}`
+   */
+  contentSizeChange: ({ width, height }: ContentSize) => {
+    return {
+      nativeEvent: { contentSize: { width, height }, target: 0 },
+    };
+  },
+};

package/src/user-event/index.ts

@@ -1,6 +1,9 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { setup } from './setup';
-import { PressOptions } from './press/press';
+import { PressOptions } from './press';
+import { TypeOptions } from './type';
+
+export { UserEventConfig } from './setup';
 
 export const userEvent = {
   setup,
@@ -9,6 +12,6 @@ export const userEvent = {
   press: (element: ReactTestInstance) => setup().press(element),
   longPress: (element: ReactTestInstance, options?: PressOptions) =>
     setup().longPress(element, options),
-  type: (element: ReactTestInstance, text: string) =>
-    setup().type(element, text),
+  type: (element: ReactTestInstance, text: string, options?: TypeOptions) =>
+    setup().type(element, text, options),
 };

package/src/user-event/press/__tests__/longPress.real-timers.test.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import { Pressable, Text } from 'react-native';
 import { render, screen } from '../../../pure';
 import { userEvent } from '../..';
-import * as WarnAboutRealTimers from '../utils/warnAboutRealTimers';
+import * as WarnAboutRealTimers from '../../utils/warn-about-real-timers';
 
 describe('userEvent.longPress with real timers', () => {
   beforeEach(() => {
     jest.useRealTimers();
     jest.restoreAllMocks();
-    jest.spyOn(WarnAboutRealTimers, 'warnAboutRealTimers').mockImplementation();
+    jest
+      .spyOn(WarnAboutRealTimers, 'warnAboutRealTimersIfNeeded')
+      .mockImplementation();
   });
 
   test('calls onLongPress if the delayLongPress is the default one', async () => {

package/src/user-event/press/__tests__/press.real-timers.test.tsx

@@ -10,13 +10,15 @@ import {
 import { createEventLogger, getEventsName } from '../../../test-utils';
 import { render, screen } from '../../..';
 import { userEvent } from '../..';
-import * as WarnAboutRealTimers from '../utils/warnAboutRealTimers';
+import * as WarnAboutRealTimers from '../../utils/warn-about-real-timers';
 
 describe('userEvent.press with real timers', () => {
   beforeEach(() => {
     jest.useRealTimers();
     jest.restoreAllMocks();
-    jest.spyOn(WarnAboutRealTimers, 'warnAboutRealTimers').mockImplementation();
+    jest
+      .spyOn(WarnAboutRealTimers, 'warnAboutRealTimersIfNeeded')
+      .mockImplementation();
   });
 
   test('calls onPressIn, onPress and onPressOut prop of touchable', async () => {

package/src/user-event/press/__tests__/press.test.tsx

@@ -304,7 +304,7 @@ describe('userEvent.press with fake timers', () => {
     expect(mockOnPress).toHaveBeenCalled();
   });
 
-  test('works on Text', async () => {
+  test('press works on Text', async () => {
     const { events, logEvent } = createEventLogger();
 
     render(
@@ -317,11 +317,29 @@ describe('userEvent.press with fake timers', () => {
         press me
       </Text>
     );
-    await userEvent.press(screen.getByText('press me'));
 
+    await userEvent.press(screen.getByText('press me'));
     expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
   });
 
+  test('longPress works Text', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <Text
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+      >
+        press me
+      </Text>
+    );
+
+    await userEvent.longPress(screen.getByText('press me'));
+    expect(getEventsName(events)).toEqual(['pressIn', 'longPress', 'pressOut']);
+  });
+
   test('doesnt trigger on disabled Text', async () => {
     const { events, logEvent } = createEventLogger();
 
@@ -361,7 +379,7 @@ describe('userEvent.press with fake timers', () => {
     expect(events).toEqual([]);
   });
 
-  test('works on TetInput', async () => {
+  test('press works on TextInput', async () => {
     const { events, logEvent } = createEventLogger();
 
     render(
@@ -371,12 +389,27 @@ describe('userEvent.press with fake timers', () => {
         onPressOut={logEvent('pressOut')}
       />
     );
+
     await userEvent.press(screen.getByPlaceholderText('email'));
+    expect(getEventsName(events)).toEqual(['pressIn', 'pressOut']);
+  });
+
+  test('longPress works on TextInput', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <TextInput
+        placeholder="email"
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+      />
+    );
 
+    await userEvent.longPress(screen.getByPlaceholderText('email'));
     expect(getEventsName(events)).toEqual(['pressIn', 'pressOut']);
   });
 
-  test('does not call onPressIn and onPressOut on non editable TetInput', async () => {
+  test('does not call onPressIn and onPressOut on non editable TextInput', async () => {
     const { events, logEvent } = createEventLogger();
 
     render(
@@ -387,11 +420,12 @@ describe('userEvent.press with fake timers', () => {
         onPressOut={logEvent('pressOut')}
       />
     );
+
     await userEvent.press(screen.getByPlaceholderText('email'));
     expect(events).toEqual([]);
   });
 
-  test('does not call onPressIn and onPressOut on TetInput with pointer events disabled', async () => {
+  test('does not call onPressIn and onPressOut on TextInput with pointer events disabled', async () => {
     const { events, logEvent } = createEventLogger();
 
     render(
@@ -402,6 +436,7 @@ describe('userEvent.press with fake timers', () => {
         onPressOut={logEvent('pressOut')}
       />
     );
+
     await userEvent.press(screen.getByPlaceholderText('email'));
     expect(events).toEqual([]);
   });

package/src/user-event/press/index.ts

@@ -1 +1 @@
-export { press, longPress } from './press';
+export { PressOptions, press, longPress } from './press';

package/src/user-event/press/press.ts

@@ -1,50 +1,63 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import { EventBuilder } from '../event-builder';
-import { UserEventInstance } from '../setup';
-import { wait } from '../utils';
 import act from '../../act';
 import { getHostParent } from '../../helpers/component-tree';
-import { filterNodeByType } from '../../helpers/filterNodeByType';
 import { isPointerEventEnabled } from '../../helpers/pointer-events';
-import { getHostComponentNames } from '../../helpers/host-component-names';
-import { jestFakeTimersAreEnabled } from '../../helpers/timers';
+import {
+  isHostText,
+  isHostTextInput,
+} from '../../helpers/host-component-names';
+import { EventBuilder } from '../event-builder';
+import { UserEventConfig, UserEventInstance } from '../setup';
+import { dispatchEvent, wait, warnAboutRealTimersIfNeeded } from '../utils';
 import { DEFAULT_MIN_PRESS_DURATION } from './constants';
-import { warnAboutRealTimers } from './utils/warnAboutRealTimers';
 
-export type PressOptions = {
-  duration: number;
-};
+export interface PressOptions {
+  duration?: number;
+}
 
 export async function press(
   this: UserEventInstance,
   element: ReactTestInstance
 ): Promise<void> {
-  await basePress(this.config, element);
+  await basePress(this.config, element, {
+    type: 'press',
+    duration: 0,
+  });
 }
 
 export async function longPress(
   this: UserEventInstance,
   element: ReactTestInstance,
-  options: PressOptions = { duration: 500 }
+  options?: PressOptions
 ): Promise<void> {
-  await basePress(this.config, element, options);
+  await basePress(this.config, element, {
+    type: 'longPress',
+    duration: options?.duration ?? 500,
+  });
+}
+
+interface BasePressOptions {
+  type: 'press' | 'longPress';
+  duration: number;
 }
 
 const basePress = async (
-  config: UserEventInstance['config'],
+  config: UserEventConfig,
   element: ReactTestInstance,
-  options: PressOptions = { duration: 0 }
+  options: BasePressOptions
 ): Promise<void> => {
-  // Text and TextInput components are mocked in React Native preset so the mock
-  // doesn't implement the pressability class
-  // Thus we need to call the props directly on the host component
-  if (isEnabledHostText(element) || isEnabledTextInput(element)) {
-    await triggerMockPressEvent(config, element, options);
+  if (isPressableText(element)) {
+    await emitTextPressEvents(config, element, options);
+    return;
+  }
+
+  if (isEnabledTextInput(element)) {
+    await emitTextInputPressEvents(config, element, options);
     return;
   }
 
   if (isEnabledTouchResponder(element)) {
-    await triggerPressEvent(config, element, options);
+    await emitPressablePressEvents(config, element, options);
     return;
   }
 
@@ -56,31 +69,33 @@ const basePress = async (
   await basePress(config, hostParentElement, options);
 };
 
-const triggerPressEvent = async (
-  config: UserEventInstance['config'],
+const emitPressablePressEvents = async (
+  config: UserEventConfig,
   element: ReactTestInstance,
-  options: PressOptions = { duration: 0 }
+  options: BasePressOptions
 ) => {
-  const areFakeTimersEnabled = jestFakeTimersAreEnabled();
-  if (!areFakeTimersEnabled) {
-    warnAboutRealTimers();
-  }
+  warnAboutRealTimersIfNeeded();
 
   await wait(config);
 
   await act(async () => {
-    element.props.onResponderGrant({
-      ...EventBuilder.Common.touch(),
-      dispatchConfig: { registrationName: 'onResponderGrant' },
-    });
+    dispatchEvent(
+      element,
+      'responderGrant',
+      EventBuilder.Common.responderGrant()
+    );
 
     await wait(config, options.duration);
 
-    element.props.onResponderRelease({
-      ...EventBuilder.Common.touch(),
-      dispatchConfig: { registrationName: 'onResponderRelease' },
-    });
+    dispatchEvent(
+      element,
+      'responderRelease',
+      EventBuilder.Common.responderRelease()
+    );
 
+    // React Native will wait for minimal delay of DEFAULT_MIN_PRESS_DURATION
+    // before emitting the `pressOut` event. We need to wait here, so that
+    // `press()` function does not return before that.
     if (DEFAULT_MIN_PRESS_DURATION - options.duration > 0) {
       await wait(config, DEFAULT_MIN_PRESS_DURATION - options.duration);
     }
@@ -94,41 +109,61 @@ const isEnabledTouchResponder = (element: ReactTestInstance) => {
   );
 };
 
-const isEnabledHostText = (element: ReactTestInstance) => {
+const isPressableText = (element: ReactTestInstance) => {
+  const hasPressEventHandler = Boolean(
+    element.props.onPress ||
+      element.props.onLongPress ||
+      element.props.onPressIn ||
+      element.props.onPressOut
+  );
+
   return (
-    filterNodeByType(element, getHostComponentNames().text) &&
+    isHostText(element) &&
     isPointerEventEnabled(element) &&
     !element.props.disabled &&
-    element.props.onPress
+    hasPressEventHandler
   );
 };
 
 const isEnabledTextInput = (element: ReactTestInstance) => {
   return (
-    filterNodeByType(element, getHostComponentNames().textInput) &&
+    isHostTextInput(element) &&
     isPointerEventEnabled(element) &&
     element.props.editable !== false
   );
 };
 
-const triggerMockPressEvent = async (
-  config: UserEventInstance['config'],
+/**
+ * Dispatches a press event sequence for Text.
+ */
+async function emitTextPressEvents(
+  config: UserEventConfig,
   element: ReactTestInstance,
-  options: PressOptions = { duration: 0 }
-) => {
-  const { onPressIn, onPress, onPressOut } = element.props;
+  options: BasePressOptions
+) {
   await wait(config);
-  if (onPressIn) {
-    onPressIn(EventBuilder.Common.touch());
-  }
-  if (onPress) {
-    onPress(EventBuilder.Common.touch());
-  }
+  dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
+
+  // Emit either `press` or `longPress`.
+  dispatchEvent(element, options.type, EventBuilder.Common.touch());
+
   await wait(config, options.duration);
-  if (onPressOut) {
-    if (DEFAULT_MIN_PRESS_DURATION - options.duration > 0) {
-      await wait(config, DEFAULT_MIN_PRESS_DURATION - options.duration);
-    }
-    onPressOut(EventBuilder.Common.touch());
-  }
-};
+  dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
+}
+
+/**
+ * Dispatches a press event sequence for TextInput.
+ */
+async function emitTextInputPressEvents(
+  config: UserEventConfig,
+  element: ReactTestInstance,
+  options: BasePressOptions
+) {
+  await wait(config);
+  dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
+
+  // Note: TextInput does not have `onPress`/`onLongPress` props.
+
+  await wait(config, options.duration);
+  dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
+}