@testing-library/react-native 12.1.2 → 12.2.0

package/src/config.ts

@@ -0,0 +1,72 @@
+import { DebugOptions } from './helpers/debugDeep';
+
+/**
+ * Global configuration options for React Native Testing Library.
+ */
+
+export type Config = {
+  /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */
+  asyncUtilTimeout: number;
+
+  /** Default value for `includeHiddenElements` query option. */
+  defaultIncludeHiddenElements: boolean;
+
+  /** Default options for `debug` helper. */
+  defaultDebugOptions?: Partial<DebugOptions>;
+};
+
+export type ConfigAliasOptions = {
+  /** RTL-compatibility alias to `defaultIncludeHiddenElements` */
+  defaultHidden: boolean;
+};
+
+export type HostComponentNames = {
+  text: string;
+  textInput: string;
+  switch: string;
+};
+
+export type InternalConfig = Config & {
+  /** Names for key React Native host components. */
+  hostComponentNames?: HostComponentNames;
+};
+
+const defaultConfig: InternalConfig = {
+  asyncUtilTimeout: 1000,
+  defaultIncludeHiddenElements: false,
+};
+
+let config = { ...defaultConfig };
+
+/**
+ * Configure global options for React Native Testing Library.
+ */
+export function configure(options: Partial<Config & ConfigAliasOptions>) {
+  const { defaultHidden, ...restOptions } = options;
+
+  const defaultIncludeHiddenElements =
+    restOptions.defaultIncludeHiddenElements ??
+    defaultHidden ??
+    config.defaultIncludeHiddenElements;
+
+  config = {
+    ...config,
+    ...restOptions,
+    defaultIncludeHiddenElements,
+  };
+}
+
+export function configureInternal(option: Partial<InternalConfig>) {
+  config = {
+    ...config,
+    ...option,
+  };
+}
+
+export function resetToDefaults() {
+  config = { ...defaultConfig };
+}
+
+export function getConfig() {
+  return config;
+}

package/src/fireEvent.ts

@@ -0,0 +1,159 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import {
+  ViewProps,
+  TextProps,
+  TextInputProps,
+  PressableProps,
+  ScrollViewProps,
+} from 'react-native';
+import act from './act';
+import { isPointerEventEnabled } from './helpers/pointer-events';
+import { isHostElement } from './helpers/component-tree';
+import { isHostTextInput } from './helpers/host-component-names';
+
+type EventHandler = (...args: unknown[]) => unknown;
+
+export function isTouchResponder(element: ReactTestInstance) {
+  if (!isHostElement(element)) {
+    return false;
+  }
+
+  return (
+    Boolean(element.props.onStartShouldSetResponder) || isHostTextInput(element)
+  );
+}
+
+/**
+ * List of events affected by `pointerEvents` prop.
+ *
+ * Note: `fireEvent` is accepting both `press` and `onPress` for event names,
+ * so we need cover both forms.
+ */
+const eventsAffectedByPointerEventsProp = new Set(['press', 'onPress']);
+
+/**
+ * List of `TextInput` events not affected by `editable` prop.
+ *
+ * Note: `fireEvent` is accepting both `press` and `onPress` for event names,
+ * so we need cover both forms.
+ */
+const textInputEventsIgnoringEditableProp = new Set([
+  'contentSizeChange',
+  'onContentSizeChange',
+  'layout',
+  'onLayout',
+  'scroll',
+  'onScroll',
+]);
+
+export function isEventEnabled(
+  element: ReactTestInstance,
+  eventName: string,
+  nearestTouchResponder?: ReactTestInstance
+) {
+  if (isHostTextInput(nearestTouchResponder)) {
+    return (
+      nearestTouchResponder?.props.editable !== false ||
+      textInputEventsIgnoringEditableProp.has(eventName)
+    );
+  }
+
+  if (
+    eventsAffectedByPointerEventsProp.has(eventName) &&
+    !isPointerEventEnabled(element)
+  ) {
+    return false;
+  }
+
+  const touchStart = nearestTouchResponder?.props.onStartShouldSetResponder?.();
+  const touchMove = nearestTouchResponder?.props.onMoveShouldSetResponder?.();
+  if (touchStart || touchMove) {
+    return true;
+  }
+
+  return touchStart === undefined && touchMove === undefined;
+}
+
+function findEventHandler(
+  element: ReactTestInstance,
+  eventName: string,
+  nearestTouchResponder?: ReactTestInstance
+): EventHandler | null {
+  const touchResponder = isTouchResponder(element)
+    ? element
+    : nearestTouchResponder;
+
+  const handler = getEventHandler(element, eventName);
+  if (handler && isEventEnabled(element, eventName, touchResponder))
+    return handler;
+
+  if (element.parent === null || element.parent.parent === null) {
+    return null;
+  }
+
+  return findEventHandler(element.parent, eventName, touchResponder);
+}
+
+function getEventHandler(element: ReactTestInstance, eventName: string) {
+  const eventHandlerName = getEventHandlerName(eventName);
+  if (typeof element.props[eventHandlerName] === 'function') {
+    return element.props[eventHandlerName];
+  }
+
+  if (typeof element.props[eventName] === 'function') {
+    return element.props[eventName];
+  }
+
+  return undefined;
+}
+
+function getEventHandlerName(eventName: string) {
+  return `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
+}
+
+// Allows any string but will provide autocomplete for type T
+type StringWithAutoComplete<T> = T | (string & Record<never, never>);
+
+// String union type of keys of T that start with on, stripped from on
+type OnKeys<T> = keyof {
+  [K in keyof T as K extends `on${infer Rest}`
+    ? Uncapitalize<Rest>
+    : never]: T[K];
+};
+
+type EventName = StringWithAutoComplete<
+  | OnKeys<ViewProps>
+  | OnKeys<TextProps>
+  | OnKeys<TextInputProps>
+  | OnKeys<PressableProps>
+  | OnKeys<ScrollViewProps>
+>;
+
+function fireEvent(
+  element: ReactTestInstance,
+  eventName: EventName,
+  ...data: unknown[]
+) {
+  const handler = findEventHandler(element, eventName);
+  if (!handler) {
+    return;
+  }
+
+  let returnValue;
+  act(() => {
+    returnValue = handler(...data);
+  });
+
+  return returnValue;
+}
+
+fireEvent.press = (element: ReactTestInstance, ...data: unknown[]) =>
+  fireEvent(element, 'press', ...data);
+
+fireEvent.changeText = (element: ReactTestInstance, ...data: unknown[]) =>
+  fireEvent(element, 'changeText', ...data);
+
+fireEvent.scroll = (element: ReactTestInstance, ...data: unknown[]) =>
+  fireEvent(element, 'scroll', ...data);
+
+export default fireEvent;

package/src/flush-micro-tasks.ts

@@ -0,0 +1,30 @@
+import { setImmediate } from './helpers/timers';
+
+export function flushMicroTasks() {
+  return new Promise((resolve) => setImmediate(resolve));
+}
+
+/**
+ * @deprecated To be removed in the next major release.
+ */
+type Thenable<T> = { then: (callback: () => T) => unknown };
+
+/**
+ * This legacy implementation of `flushMicroTasks` is used for compatibility with
+ * older versions of React Native (pre 0.71) which uses Promise polyfil.
+ *
+ * For users with older version of React Native there is a workaround of using our own
+ * Jest preset instead the `react-native` one, but requiring such change would be a
+ * breaking change for existing users.
+ *
+ * @deprecated To be removed in the next major release.
+ */
+export function flushMicroTasksLegacy(): Thenable<void> {
+  return {
+    // using "thenable" instead of a Promise, because otherwise it breaks when
+    // using "modern" fake timers
+    then(resolve) {
+      setImmediate(resolve);
+    },
+  };
+}

package/src/helpers/__tests__/accessiblity.test.tsx

@@ -0,0 +1,373 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  Switch,
+  TouchableOpacity,
+} from 'react-native';
+import { render, isHiddenFromAccessibility, isInaccessible } from '../..';
+import { isAccessibilityElement } from '../accessiblity';
+
+describe('isHiddenFromAccessibility', () => {
+  test('returns false for accessible elements', () => {
+    expect(
+      isHiddenFromAccessibility(
+        render(<View testID="subject" />).getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(false);
+
+    expect(
+      isHiddenFromAccessibility(
+        render(<Text testID="subject">Hello</Text>).getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(false);
+
+    expect(
+      isHiddenFromAccessibility(
+        render(<TextInput testID="subject" />).getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(false);
+  });
+
+  test('returns true for null elements', () => {
+    expect(isHiddenFromAccessibility(null)).toBe(true);
+  });
+
+  test('detects elements with accessibilityElementsHidden prop', () => {
+    const view = render(<View testID="subject" accessibilityElementsHidden />);
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects nested elements with accessibilityElementsHidden prop', () => {
+    const view = render(
+      <View accessibilityElementsHidden>
+        <View testID="subject" />
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects deeply nested elements with accessibilityElementsHidden prop', () => {
+    const view = render(
+      <View accessibilityElementsHidden>
+        <View>
+          <View>
+            <View testID="subject" />
+          </View>
+        </View>
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects elements with importantForAccessibility="no-hide-descendants" prop', () => {
+    const view = render(
+      <View testID="subject" importantForAccessibility="no-hide-descendants" />
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects nested elements with importantForAccessibility="no-hide-descendants" prop', () => {
+    const view = render(
+      <View importantForAccessibility="no-hide-descendants">
+        <View testID="subject" />
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects elements with display=none', () => {
+    const view = render(<View testID="subject" style={{ display: 'none' }} />);
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects nested elements with display=none', () => {
+    const view = render(
+      <View style={{ display: 'none' }}>
+        <View testID="subject" />
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects deeply nested elements with display=none', () => {
+    const view = render(
+      <View style={{ display: 'none' }}>
+        <View>
+          <View>
+            <View testID="subject" />
+          </View>
+        </View>
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects elements with display=none with complex style', () => {
+    const view = render(
+      <View
+        testID="subject"
+        style={[
+          { display: 'flex' },
+          [{ display: 'flex' }],
+          { display: 'none' },
+        ]}
+      />
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('is not trigged by opacity = 0', () => {
+    const view = render(<View testID="subject" style={{ opacity: 0 }} />);
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(false);
+  });
+
+  test('detects siblings of element with accessibilityViewIsModal prop', () => {
+    const view = render(
+      <View>
+        <View accessibilityViewIsModal />
+        <View testID="subject" />
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('detects deeply nested siblings of element with accessibilityViewIsModal prop', () => {
+    const view = render(
+      <View>
+        <View accessibilityViewIsModal />
+        <View>
+          <View>
+            <View testID="subject" />
+          </View>
+        </View>
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(true);
+  });
+
+  test('is not triggered for element with accessibilityViewIsModal prop', () => {
+    const view = render(
+      <View>
+        <View accessibilityViewIsModal testID="subject" />
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(false);
+  });
+
+  test('is not triggered for child of element with accessibilityViewIsModal prop', () => {
+    const view = render(
+      <View>
+        <View accessibilityViewIsModal>
+          <View testID="subject" />
+        </View>
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(false);
+  });
+
+  test('is not triggered for descendent of element with accessibilityViewIsModal prop', () => {
+    const view = render(
+      <View>
+        <View accessibilityViewIsModal>
+          <View>
+            <View>
+              <View testID="subject" />
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+    expect(
+      isHiddenFromAccessibility(
+        view.getByTestId('subject', {
+          includeHiddenElements: true,
+        })
+      )
+    ).toBe(false);
+  });
+
+  test('has isInaccessible alias', () => {
+    expect(isInaccessible).toBe(isHiddenFromAccessibility);
+  });
+});
+
+describe('isAccessibilityElement', () => {
+  test('matches View component properly', () => {
+    const { getByTestId } = render(
+      <View>
+        <View testID="default" />
+        <View testID="true" accessible />
+        <View testID="false" accessible={false} />
+      </View>
+    );
+    expect(isAccessibilityElement(getByTestId('default'))).toBeFalsy();
+    expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
+  });
+
+  test('matches TextInput component properly', () => {
+    const { getByTestId } = render(
+      <View>
+        <TextInput testID="default" />
+        <TextInput testID="true" accessible />
+        <TextInput testID="false" accessible={false} />
+      </View>
+    );
+    expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
+  });
+
+  test('matches Text component properly', () => {
+    const { getByTestId } = render(
+      <View>
+        <Text testID="default">Default</Text>
+        <Text testID="true" accessible>
+          True
+        </Text>
+        <Text testID="false" accessible={false}>
+          False
+        </Text>
+      </View>
+    );
+    expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
+  });
+
+  test('matches Switch component properly', () => {
+    const { getByTestId } = render(
+      <View>
+        <Switch testID="default" />
+        <Switch testID="true" accessible />
+        <Switch testID="false" accessible={false} />
+      </View>
+    );
+    expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
+  });
+
+  test('matches Pressable component properly', () => {
+    const { getByTestId } = render(
+      <View>
+        <Pressable testID="default" />
+        <Pressable testID="true" accessible />
+        <Pressable testID="false" accessible={false} />
+      </View>
+    );
+    expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
+  });
+
+  test('matches TouchableOpacity component properly', () => {
+    const { getByTestId } = render(
+      <View>
+        <TouchableOpacity testID="default" />
+        <TouchableOpacity testID="true" accessible />
+        <TouchableOpacity testID="false" accessible={false} />
+      </View>
+    );
+    expect(isAccessibilityElement(getByTestId('default'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('true'))).toBeTruthy();
+    expect(isAccessibilityElement(getByTestId('false'))).toBeFalsy();
+  });
+
+  test('returns false when given null', () => {
+    expect(isAccessibilityElement(null)).toEqual(false);
+  });
+});