@testing-library/react-native 12.2.1 → 12.3.0

package/src/helpers/__tests__/component-tree.test.tsx

@@ -1,226 +0,0 @@
-import React from 'react';
-import { View, Text, TextInput } from 'react-native';
-import { render } from '../..';
-import {
-  getHostChildren,
-  getHostParent,
-  getHostSelves,
-  getHostSiblings,
-} from '../component-tree';
-
-function ZeroHostChildren() {
-  return <></>;
-}
-
-function MultipleHostChildren() {
-  return (
-    <>
-      <View testID="child1" />
-      <View testID="child2" />
-      <View testID="child3" />
-    </>
-  );
-}
-
-describe('getHostParent()', () => {
-  it('returns host parent for host component', () => {
-    const view = render(
-      <View testID="grandparent">
-        <View testID="parent">
-          <View testID="subject" />
-          <View testID="sibling" />
-        </View>
-      </View>
-    );
-
-    const hostParent = getHostParent(view.getByTestId('subject'));
-    expect(hostParent).toBe(view.getByTestId('parent'));
-
-    const hostGrandparent = getHostParent(hostParent);
-    expect(hostGrandparent).toBe(view.getByTestId('grandparent'));
-
-    expect(getHostParent(hostGrandparent)).toBe(null);
-  });
-
-  it('returns host parent for null', () => {
-    expect(getHostParent(null)).toBe(null);
-  });
-
-  it('returns host parent for composite component', () => {
-    const view = render(
-      <View testID="parent">
-        <MultipleHostChildren />
-        <View testID="subject" />
-      </View>
-    );
-
-    const compositeComponent = view.UNSAFE_getByType(MultipleHostChildren);
-    const hostParent = getHostParent(compositeComponent);
-    expect(hostParent).toBe(view.getByTestId('parent'));
-  });
-});
-
-describe('getHostChildren()', () => {
-  it('returns host children for host component', () => {
-    const view = render(
-      <View testID="grandparent">
-        <View testID="parent">
-          <View testID="subject" />
-          <Text testID="sibling">Hello</Text>
-        </View>
-      </View>
-    );
-
-    const hostSubject = view.getByTestId('subject');
-    expect(getHostChildren(hostSubject)).toEqual([]);
-
-    const hostSibling = view.getByTestId('sibling');
-    expect(getHostChildren(hostSibling)).toEqual([]);
-
-    const hostParent = view.getByTestId('parent');
-    expect(getHostChildren(hostParent)).toEqual([hostSubject, hostSibling]);
-
-    const hostGrandparent = view.getByTestId('grandparent');
-    expect(getHostChildren(hostGrandparent)).toEqual([hostParent]);
-  });
-
-  it('returns host children for composite component', () => {
-    const view = render(
-      <View testID="parent">
-        <MultipleHostChildren />
-        <View testID="subject" />
-        <View testID="sibling" />
-      </View>
-    );
-
-    expect(getHostChildren(view.getByTestId('parent'))).toEqual([
-      view.getByTestId('child1'),
-      view.getByTestId('child2'),
-      view.getByTestId('child3'),
-      view.getByTestId('subject'),
-      view.getByTestId('sibling'),
-    ]);
-  });
-});
-
-describe('getHostSelves()', () => {
-  it('returns passed element for host components', () => {
-    const view = render(
-      <View testID="grandparent">
-        <View testID="parent">
-          <View testID="subject" />
-          <View testID="sibling" />
-        </View>
-      </View>
-    );
-
-    const hostSubject = view.getByTestId('subject');
-    expect(getHostSelves(hostSubject)).toEqual([hostSubject]);
-
-    const hostSibling = view.getByTestId('sibling');
-    expect(getHostSelves(hostSibling)).toEqual([hostSibling]);
-
-    const hostParent = view.getByTestId('parent');
-    expect(getHostSelves(hostParent)).toEqual([hostParent]);
-
-    const hostGrandparent = view.getByTestId('grandparent');
-    expect(getHostSelves(hostGrandparent)).toEqual([hostGrandparent]);
-  });
-
-  test('returns single host element for React Native composite components', () => {
-    const view = render(
-      <View testID="parent">
-        <Text testID="text">Text</Text>
-        <TextInput
-          testID="textInput"
-          defaultValue="TextInputValue"
-          placeholder="TextInputPlaceholder"
-        />
-      </View>
-    );
-
-    const compositeText = view.getByText('Text');
-    const hostText = view.getByTestId('text');
-    expect(getHostSelves(compositeText)).toEqual([hostText]);
-
-    const compositeTextInputByValue = view.getByDisplayValue('TextInputValue');
-    const compositeTextInputByPlaceholder = view.getByPlaceholderText(
-      'TextInputPlaceholder'
-    );
-
-    const hostTextInput = view.getByTestId('textInput');
-    expect(getHostSelves(compositeTextInputByValue)).toEqual([hostTextInput]);
-    expect(getHostSelves(compositeTextInputByPlaceholder)).toEqual([
-      hostTextInput,
-    ]);
-  });
-
-  test('returns host children for custom composite components', () => {
-    const view = render(
-      <View testID="parent">
-        <ZeroHostChildren />
-        <MultipleHostChildren />
-        <View testID="sibling" />
-      </View>
-    );
-
-    const zeroCompositeComponent = view.UNSAFE_getByType(ZeroHostChildren);
-    expect(getHostSelves(zeroCompositeComponent)).toEqual([]);
-
-    const multipleCompositeComponent =
-      view.UNSAFE_getByType(MultipleHostChildren);
-    const hostChild1 = view.getByTestId('child1');
-    const hostChild2 = view.getByTestId('child2');
-    const hostChild3 = view.getByTestId('child3');
-    expect(getHostSelves(multipleCompositeComponent)).toEqual([
-      hostChild1,
-      hostChild2,
-      hostChild3,
-    ]);
-  });
-});
-
-describe('getHostSiblings()', () => {
-  it('returns host siblings for host component', () => {
-    const view = render(
-      <View testID="grandparent">
-        <View testID="parent">
-          <View testID="siblingBefore" />
-          <View testID="subject" />
-          <View testID="siblingAfter" />
-          <MultipleHostChildren />
-        </View>
-      </View>
-    );
-
-    const hostSiblings = getHostSiblings(view.getByTestId('subject'));
-    expect(hostSiblings).toEqual([
-      view.getByTestId('siblingBefore'),
-      view.getByTestId('siblingAfter'),
-      view.getByTestId('child1'),
-      view.getByTestId('child2'),
-      view.getByTestId('child3'),
-    ]);
-  });
-
-  it('returns host siblings for composite component', () => {
-    const view = render(
-      <View testID="grandparent">
-        <View testID="parent">
-          <View testID="siblingBefore" />
-          <View testID="subject" />
-          <View testID="siblingAfter" />
-          <MultipleHostChildren />
-        </View>
-      </View>
-    );
-
-    const compositeComponent = view.UNSAFE_getByType(MultipleHostChildren);
-    const hostSiblings = getHostSiblings(compositeComponent);
-    expect(hostSiblings).toEqual([
-      view.getByTestId('siblingBefore'),
-      view.getByTestId('subject'),
-      view.getByTestId('siblingAfter'),
-    ]);
-  });
-});

package/src/helpers/__tests__/format-default.tsx

@@ -1,114 +0,0 @@
-import { ReactTestRendererJSON } from 'react-test-renderer';
-import { defaultMapProps } from '../format-default';
-
-const node: ReactTestRendererJSON = {
-  type: 'View',
-  props: {},
-  children: null,
-};
-
-describe('mapPropsForQueryError', () => {
-  test('preserves props that are helpful for debugging', () => {
-    const props = {
-      accessibilityElementsHidden: true,
-      accessibilityViewIsModal: true,
-      importantForAccessibility: 'yes',
-      testID: 'TEST_ID',
-      nativeID: 'NATIVE_ID',
-      accessibilityLabel: 'LABEL',
-      accessibilityLabelledBy: 'LABELLED_BY',
-      accessibilityRole: 'ROLE',
-      accessibilityHint: 'HINT',
-      placeholder: 'PLACEHOLDER',
-      value: 'VALUE',
-      defaultValue: 'DEFAULT_VALUE',
-    };
-
-    const result = defaultMapProps(props, node);
-
-    expect(result).toStrictEqual(props);
-  });
-
-  test('does not preserve less helpful props', () => {
-    const result = defaultMapProps(
-      {
-        style: [{ flex: 1 }, { display: 'flex' }],
-        onPress: () => null,
-        key: 'foo',
-      },
-      node
-    );
-
-    expect(result).toStrictEqual({});
-  });
-
-  test('preserves "display: none" style but no other style', () => {
-    const result = defaultMapProps(
-      { style: [{ flex: 1 }, { display: 'none', flex: 2 }] },
-      node
-    );
-
-    expect(result).toStrictEqual({
-      style: { display: 'none' },
-    });
-  });
-
-  test('removes undefined keys from accessibilityState', () => {
-    const result = defaultMapProps(
-      { accessibilityState: { checked: undefined, selected: false } },
-      node
-    );
-
-    expect(result).toStrictEqual({
-      accessibilityState: { selected: false },
-    });
-  });
-
-  test('removes accessibilityState if all keys are undefined', () => {
-    const result = defaultMapProps(
-      { accessibilityState: { checked: undefined, selected: undefined } },
-      node
-    );
-
-    expect(result).toStrictEqual({});
-  });
-
-  test('does not fail if accessibilityState is a string, passes through', () => {
-    const result = defaultMapProps({ accessibilityState: 'foo' }, node);
-    expect(result).toStrictEqual({ accessibilityState: 'foo' });
-  });
-
-  test('does not fail if accessibilityState is an array, passes through', () => {
-    const result = defaultMapProps({ accessibilityState: [1] }, node);
-    expect(result).toStrictEqual({ accessibilityState: [1] });
-  });
-
-  test('does not fail if accessibilityState is null, passes through', () => {
-    const result = defaultMapProps({ accessibilityState: null }, node);
-    expect(result).toStrictEqual({ accessibilityState: null });
-  });
-
-  test('does not fail if accessibilityState is nested object, passes through', () => {
-    const accessibilityState = { 1: { 2: 3 }, 2: undefined };
-    const result = defaultMapProps({ accessibilityState }, node);
-    expect(result).toStrictEqual({ accessibilityState: { 1: { 2: 3 } } });
-  });
-
-  test('removes undefined keys from accessibilityValue', () => {
-    const result = defaultMapProps(
-      { accessibilityValue: { min: 1, max: undefined } },
-      node
-    );
-
-    expect(result).toStrictEqual({ accessibilityValue: { min: 1 } });
-  });
-
-  test('removes accessibilityValue if all keys are undefined', () => {
-    const result = defaultMapProps(
-      { accessibilityValue: { min: undefined } },
-      node
-    );
-
-    expect(result).toStrictEqual({});
-  });
-});

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

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { Text } from 'react-native';
-import render from '../../render';
-import { getTextContent } from '../getTextContent';
-
-test('getTextContent with simple content', () => {
-  const view = render(<Text>Hello world</Text>);
-  expect(getTextContent(view.root)).toBe('Hello world');
-});
-
-test('getTextContent with null element', () => {
-  expect(getTextContent(null)).toBe('');
-});
-
-test('getTextContent with single nested content', () => {
-  const view = render(
-    <Text>
-      <Text>Hello world</Text>
-    </Text>
-  );
-  expect(getTextContent(view.root)).toBe('Hello world');
-});
-
-test('getTextContent with multiple nested content', () => {
-  const view = render(
-    <Text>
-      <Text>Hello</Text> <Text>world</Text>
-    </Text>
-  );
-  expect(getTextContent(view.root)).toBe('Hello world');
-});
-
-test('getTextContent with multiple number content', () => {
-  const view = render(
-    <Text>
-      <Text>Hello</Text> <Text>world</Text> <Text>{100}</Text>
-    </Text>
-  );
-  expect(getTextContent(view.root)).toBe('Hello world 100');
-});
-
-test('getTextContent with multiple boolean content', () => {
-  const view = render(
-    <Text>
-      <Text>Hello{false}</Text> <Text>{true}world</Text>
-    </Text>
-  );
-  expect(getTextContent(view.root)).toBe('Hello world');
-});

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { configure, render, screen } from '../..';
-
-test('includeHiddenElements query option takes priority over hidden option and global config', () => {
-  configure({ defaultHidden: true, defaultIncludeHiddenElements: true });
-  render(<View testID="view" style={{ display: 'none' }} />);
-  expect(
-    screen.queryByTestId('view', { includeHiddenElements: false, hidden: true })
-  ).toBeFalsy();
-});
-
-test('hidden option takes priority over global config when includeHiddenElements is not defined', () => {
-  configure({ defaultHidden: true, defaultIncludeHiddenElements: true });
-  render(<View testID="view" style={{ display: 'none' }} />);
-  expect(screen.queryByTestId('view', { hidden: false })).toBeFalsy();
-});
-
-test('global config defaultIncludeElements option takes priority over defaultHidden when set at the same time', () => {
-  configure({ defaultHidden: false, defaultIncludeHiddenElements: true });
-  render(<View testID="view" style={{ display: 'none' }} />);
-  expect(screen.getByTestId('view')).toBeTruthy();
-});
-
-test('defaultHidden takes priority when it was set last', () => {
-  // also simulates the case when defaultIncludeHiddenElements is true by default in the config
-  configure({ defaultIncludeHiddenElements: true });
-  configure({ defaultHidden: false });
-  render(<View testID="view" style={{ display: 'none' }} />);
-  expect(screen.queryByTestId('view')).toBeFalsy();
-});
-
-test('defaultIncludeHiddenElements takes priority when it was set last', () => {
-  // also simulates the case when defaultHidden is true by default in the config
-  configure({ defaultHidden: true });
-  configure({ defaultIncludeHiddenElements: false });
-  render(<View testID="view" style={{ display: 'none' }} />);
-  expect(screen.queryByTestId('view')).toBeFalsy();
-});

package/src/helpers/__tests__/query-name.test.ts

@@ -1,10 +0,0 @@
-import { getQueryPrefix } from '../query-name';
-
-test('getQueryPrefix should return correct prefix', () => {
-  expect(getQueryPrefix('getByRole')).toBe('get');
-  expect(getQueryPrefix('getAllByText')).toEqual('getAll');
-  expect(getQueryPrefix('queryByTestId')).toEqual('query');
-  expect(getQueryPrefix('queryAllByPlaceholderText')).toEqual('queryAll');
-  expect(getQueryPrefix('findByHintText')).toEqual('find');
-  expect(getQueryPrefix('findAllByDisplayValue')).toEqual('findAll');
-});

package/src/helpers/__tests__/timers.test.ts

@@ -1,8 +0,0 @@
-import { jestFakeTimersAreEnabled } from '../timers';
-describe('timers', () => {
-  it('should not mock timers if RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS is set', async () => {
-    process.env.RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS = 'true';
-    jest.useFakeTimers();
-    expect(jestFakeTimersAreEnabled()).toEqual(false);
-  });
-});

package/src/helpers/accessiblity.ts

@@ -1,108 +0,0 @@
-import {
-  AccessibilityState,
-  AccessibilityValue,
-  StyleSheet,
-} from 'react-native';
-import { ReactTestInstance } from 'react-test-renderer';
-import { getHostSiblings } from './component-tree';
-import { getHostComponentNames } from './host-component-names';
-
-type IsInaccessibleOptions = {
-  cache?: WeakMap<ReactTestInstance, boolean>;
-};
-
-export const accessibilityStateKeys: (keyof AccessibilityState)[] = [
-  'disabled',
-  'selected',
-  'checked',
-  'busy',
-  'expanded',
-];
-
-export const accessiblityValueKeys: (keyof AccessibilityValue)[] = [
-  'min',
-  'max',
-  'now',
-  'text',
-];
-
-export function isHiddenFromAccessibility(
-  element: ReactTestInstance | null,
-  { cache }: IsInaccessibleOptions = {}
-): boolean {
-  if (element == null) {
-    return true;
-  }
-
-  let current: ReactTestInstance | null = element;
-  while (current) {
-    let isCurrentSubtreeInaccessible = cache?.get(current);
-
-    if (isCurrentSubtreeInaccessible === undefined) {
-      isCurrentSubtreeInaccessible = isSubtreeInaccessible(current);
-      cache?.set(current, isCurrentSubtreeInaccessible);
-    }
-
-    if (isCurrentSubtreeInaccessible) {
-      return true;
-    }
-
-    current = current.parent;
-  }
-
-  return false;
-}
-
-/** RTL-compatitibility alias for `isHiddenFromAccessibility` */
-export const isInaccessible = isHiddenFromAccessibility;
-
-function isSubtreeInaccessible(element: ReactTestInstance): boolean {
-  // Null props can happen for React.Fragments
-  if (element.props == null) {
-    return false;
-  }
-
-  // iOS: accessibilityElementsHidden
-  // See: https://reactnative.dev/docs/accessibility#accessibilityelementshidden-ios
-  if (element.props.accessibilityElementsHidden) {
-    return true;
-  }
-
-  // Android: importantForAccessibility
-  // See: https://reactnative.dev/docs/accessibility#importantforaccessibility-android
-  if (element.props.importantForAccessibility === 'no-hide-descendants') {
-    return true;
-  }
-
-  // Note that `opacity: 0` is not treated as inaccessible on iOS
-  const flatStyle = StyleSheet.flatten(element.props.style) ?? {};
-  if (flatStyle.display === 'none') return true;
-
-  // iOS: accessibilityViewIsModal
-  // See: https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios
-  const hostSiblings = getHostSiblings(element);
-  if (hostSiblings.some((sibling) => sibling.props.accessibilityViewIsModal)) {
-    return true;
-  }
-
-  return false;
-}
-
-export function isAccessibilityElement(
-  element: ReactTestInstance | null
-): boolean {
-  if (element == null) {
-    return false;
-  }
-
-  if (element.props.accessible !== undefined) {
-    return element.props.accessible;
-  }
-
-  const hostComponentNames = getHostComponentNames();
-  return (
-    element?.type === hostComponentNames?.text ||
-    element?.type === hostComponentNames?.textInput ||
-    element?.type === hostComponentNames?.switch
-  );
-}

package/src/helpers/component-tree.ts

@@ -1,94 +0,0 @@
-import { ReactTestInstance } from 'react-test-renderer';
-
-/**
- * ReactTestInstance referring to host element.
- */
-export type HostTestInstance = ReactTestInstance & { type: string };
-
-/**
- * Checks if the given element is a host element.
- * @param element The element to check.
- */
-export function isHostElement(
-  element?: ReactTestInstance | null
-): element is HostTestInstance {
-  return typeof element?.type === 'string';
-}
-
-/**
- * Returns first host ancestor for given element.
- * @param element The element start traversing from.
- */
-export function getHostParent(
-  element: ReactTestInstance | null
-): HostTestInstance | null {
-  if (element == null) {
-    return null;
-  }
-
-  let current = element.parent;
-  while (current) {
-    if (isHostElement(current)) {
-      return current;
-    }
-
-    current = current.parent;
-  }
-
-  return null;
-}
-
-/**
- * Returns host children for given element.
- * @param element The element start traversing from.
- */
-export function getHostChildren(
-  element: ReactTestInstance | null
-): HostTestInstance[] {
-  if (element == null) {
-    return [];
-  }
-
-  const hostChildren: HostTestInstance[] = [];
-
-  element.children.forEach((child) => {
-    if (typeof child !== 'object') {
-      return;
-    }
-
-    if (isHostElement(child)) {
-      hostChildren.push(child);
-    } else {
-      hostChildren.push(...getHostChildren(child));
-    }
-  });
-
-  return hostChildren;
-}
-
-/**
- * Return the array of host elements that represent the passed element.
- *
- * @param element The element start traversing from.
- * @returns If the passed element is a host element, it will return an array containing only that element,
- * if the passed element is a composite element, it will return an array containing its host children (zero, one or many).
- */
-export function getHostSelves(
-  element: ReactTestInstance | null
-): HostTestInstance[] {
-  return isHostElement(element) ? [element] : getHostChildren(element);
-}
-
-/**
- * Returns host siblings for given element.
- * @param element The element start traversing from.
- */
-export function getHostSiblings(
-  element: ReactTestInstance | null
-): HostTestInstance[] {
-  const hostParent = getHostParent(element);
-  const hostSelves = getHostSelves(element);
-  return getHostChildren(hostParent).filter(
-    (sibling) => !hostSelves.includes(sibling)
-  );
-}

package/src/helpers/debugDeep.ts

@@ -1,27 +0,0 @@
-import type { ReactTestRendererJSON } from 'react-test-renderer';
-import format, { FormatOptions } from './format';
-
-export type DebugOptions = {
-  message?: string;
-} & FormatOptions;
-
-/**
- * Log pretty-printed deep test component instance
- */
-export default function debugDeep(
-  instance: ReactTestRendererJSON | ReactTestRendererJSON[],
-  options?: DebugOptions | string
-) {
-  const message = typeof options === 'string' ? options : options?.message;
-
-  const formatOptions =
-    typeof options === 'object' ? { mapProps: options?.mapProps } : undefined;
-
-  if (message) {
-    // eslint-disable-next-line no-console
-    console.log(`${message}\n\n`, format(instance, formatOptions));
-  } else {
-    // eslint-disable-next-line no-console
-    console.log(format(instance, formatOptions));
-  }
-}