@testing-library/react-native 12.1.2 → 12.2.0

package/src/queries/placeholderText.ts

@@ -0,0 +1,79 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { findAll } from '../helpers/findAll';
+import { matches, TextMatch, TextMatchOptions } from '../matches';
+import { filterNodeByType } from '../helpers/filterNodeByType';
+import { getHostComponentNames } from '../helpers/host-component-names';
+import { makeQueries } from './makeQueries';
+import type {
+  FindAllByQuery,
+  FindByQuery,
+  GetAllByQuery,
+  GetByQuery,
+  QueryAllByQuery,
+  QueryByQuery,
+} from './makeQueries';
+import type { CommonQueryOptions } from './options';
+
+type ByPlaceholderTextOptions = CommonQueryOptions & TextMatchOptions;
+
+const getTextInputNodeByPlaceholderText = (
+  node: ReactTestInstance,
+  placeholder: TextMatch,
+  options: TextMatchOptions = {}
+) => {
+  const { exact, normalizer } = options;
+
+  return (
+    filterNodeByType(node, getHostComponentNames().textInput) &&
+    matches(placeholder, node.props.placeholder, normalizer, exact)
+  );
+};
+
+const queryAllByPlaceholderText = (
+  instance: ReactTestInstance
+): ((
+  placeholder: TextMatch,
+  queryOptions?: ByPlaceholderTextOptions
+) => Array<ReactTestInstance>) =>
+  function queryAllByPlaceholderFn(placeholder, queryOptions) {
+    return findAll(
+      instance,
+      (node) =>
+        getTextInputNodeByPlaceholderText(node, placeholder, queryOptions),
+      queryOptions
+    );
+  };
+
+const getMultipleError = (placeholder: TextMatch) =>
+  `Found multiple elements with placeholder: ${String(placeholder)} `;
+const getMissingError = (placeholder: TextMatch) =>
+  `Unable to find an element with placeholder: ${String(placeholder)}`;
+
+const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries(
+  queryAllByPlaceholderText,
+  getMissingError,
+  getMultipleError
+);
+
+export type ByPlaceholderTextQueries = {
+  getByPlaceholderText: GetByQuery<TextMatch, ByPlaceholderTextOptions>;
+  getAllByPlaceholderText: GetAllByQuery<TextMatch, ByPlaceholderTextOptions>;
+  queryByPlaceholderText: QueryByQuery<TextMatch, ByPlaceholderTextOptions>;
+  queryAllByPlaceholderText: QueryAllByQuery<
+    TextMatch,
+    ByPlaceholderTextOptions
+  >;
+  findByPlaceholderText: FindByQuery<TextMatch, ByPlaceholderTextOptions>;
+  findAllByPlaceholderText: FindAllByQuery<TextMatch, ByPlaceholderTextOptions>;
+};
+
+export const bindByPlaceholderTextQueries = (
+  instance: ReactTestInstance
+): ByPlaceholderTextQueries => ({
+  getByPlaceholderText: getBy(instance),
+  getAllByPlaceholderText: getAllBy(instance),
+  queryByPlaceholderText: queryBy(instance),
+  queryAllByPlaceholderText: queryAllBy(instance),
+  findByPlaceholderText: findBy(instance),
+  findAllByPlaceholderText: findAllBy(instance),
+});

package/src/queries/role.ts

@@ -0,0 +1,132 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import {
+  accessibilityStateKeys,
+  accessiblityValueKeys,
+  isAccessibilityElement,
+} from '../helpers/accessiblity';
+import { findAll } from '../helpers/findAll';
+import {
+  AccessibilityStateMatcher,
+  matchAccessibilityState,
+} from '../helpers/matchers/accessibilityState';
+import {
+  AccessibilityValueMatcher,
+  matchAccessibilityValue,
+} from '../helpers/matchers/accessibilityValue';
+import { matchStringProp } from '../helpers/matchers/matchStringProp';
+import type { TextMatch } from '../matches';
+import { getQueriesForElement } from '../within';
+import { makeQueries } from './makeQueries';
+import type {
+  FindAllByQuery,
+  FindByQuery,
+  GetAllByQuery,
+  GetByQuery,
+  QueryAllByQuery,
+  QueryByQuery,
+} from './makeQueries';
+import { CommonQueryOptions } from './options';
+
+type ByRoleOptions = CommonQueryOptions &
+  AccessibilityStateMatcher & {
+    name?: TextMatch;
+    value?: AccessibilityValueMatcher;
+  };
+
+const matchAccessibleNameIfNeeded = (
+  node: ReactTestInstance,
+  name?: TextMatch
+) => {
+  if (name == null) return true;
+
+  const { queryAllByText, queryAllByLabelText } = getQueriesForElement(node);
+  return (
+    queryAllByText(name).length > 0 || queryAllByLabelText(name).length > 0
+  );
+};
+
+const matchAccessibleStateIfNeeded = (
+  node: ReactTestInstance,
+  options?: ByRoleOptions
+) => {
+  return options != null ? matchAccessibilityState(node, options) : true;
+};
+
+const matchAccessibilityValueIfNeeded = (
+  node: ReactTestInstance,
+  value?: AccessibilityValueMatcher
+) => {
+  return value != null ? matchAccessibilityValue(node, value) : true;
+};
+
+const queryAllByRole = (
+  instance: ReactTestInstance
+): ((role: TextMatch, options?: ByRoleOptions) => Array<ReactTestInstance>) =>
+  function queryAllByRoleFn(role, options) {
+    return findAll(
+      instance,
+      (node) =>
+        // run the cheapest checks first, and early exit to avoid unneeded computations
+        typeof node.type === 'string' &&
+        isAccessibilityElement(node) &&
+        matchStringProp(node.props.accessibilityRole, role) &&
+        matchAccessibleStateIfNeeded(node, options) &&
+        matchAccessibilityValueIfNeeded(node, options?.value) &&
+        matchAccessibleNameIfNeeded(node, options?.name),
+      options
+    );
+  };
+
+const formatQueryParams = (role: TextMatch, options: ByRoleOptions = {}) => {
+  const params = [`role: "${String(role)}"`];
+
+  if (options.name) {
+    params.push(`name: "${String(options.name)}"`);
+  }
+
+  accessibilityStateKeys.forEach((stateKey) => {
+    if (options[stateKey] !== undefined) {
+      params.push(`${stateKey} state: ${options[stateKey]}`);
+    }
+  });
+
+  accessiblityValueKeys.forEach((valueKey) => {
+    if (options?.value?.[valueKey] !== undefined) {
+      params.push(`${valueKey} value: ${options?.value?.[valueKey]}`);
+    }
+  });
+
+  return params.join(', ');
+};
+
+const getMultipleError = (role: TextMatch, options?: ByRoleOptions) =>
+  `Found multiple elements with ${formatQueryParams(role, options)}`;
+
+const getMissingError = (role: TextMatch, options?: ByRoleOptions) =>
+  `Unable to find an element with ${formatQueryParams(role, options)}`;
+
+const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries(
+  queryAllByRole,
+  getMissingError,
+  getMultipleError
+);
+
+export type ByRoleQueries = {
+  getByRole: GetByQuery<TextMatch, ByRoleOptions>;
+  getAllByRole: GetAllByQuery<TextMatch, ByRoleOptions>;
+  queryByRole: QueryByQuery<TextMatch, ByRoleOptions>;
+  queryAllByRole: QueryAllByQuery<TextMatch, ByRoleOptions>;
+  findByRole: FindByQuery<TextMatch, ByRoleOptions>;
+  findAllByRole: FindAllByQuery<TextMatch, ByRoleOptions>;
+};
+
+export const bindByRoleQueries = (
+  instance: ReactTestInstance
+): ByRoleQueries => ({
+  getByRole: getBy(instance),
+  getAllByRole: getAllBy(instance),
+  queryByRole: queryBy(instance),
+  queryAllByRole: queryAllBy(instance),
+  findByRole: findBy(instance),
+  findAllByRole: findAllBy(instance),
+});

package/src/queries/testId.ts

@@ -0,0 +1,71 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { findAll } from '../helpers/findAll';
+import { matches, TextMatch, TextMatchOptions } from '../matches';
+import { makeQueries } from './makeQueries';
+import type {
+  FindAllByQuery,
+  FindByQuery,
+  GetAllByQuery,
+  GetByQuery,
+  QueryAllByQuery,
+  QueryByQuery,
+} from './makeQueries';
+import type { CommonQueryOptions } from './options';
+
+type ByTestIdOptions = CommonQueryOptions & TextMatchOptions;
+
+const getNodeByTestId = (
+  node: ReactTestInstance,
+  testID: TextMatch,
+  options: TextMatchOptions = {}
+) => {
+  const { exact, normalizer } = options;
+  return matches(testID, node.props.testID, normalizer, exact);
+};
+
+const queryAllByTestId = (
+  instance: ReactTestInstance
+): ((
+  testId: TextMatch,
+  queryOptions?: ByTestIdOptions
+) => Array<ReactTestInstance>) =>
+  function queryAllByTestIdFn(testId, queryOptions) {
+    return findAll(
+      instance,
+      (node) =>
+        typeof node.type === 'string' &&
+        getNodeByTestId(node, testId, queryOptions),
+      queryOptions
+    );
+  };
+
+const getMultipleError = (testId: TextMatch) =>
+  `Found multiple elements with testID: ${String(testId)}`;
+const getMissingError = (testId: TextMatch) =>
+  `Unable to find an element with testID: ${String(testId)}`;
+
+const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries(
+  queryAllByTestId,
+  getMissingError,
+  getMultipleError
+);
+
+export type ByTestIdQueries = {
+  getByTestId: GetByQuery<TextMatch, ByTestIdOptions>;
+  getAllByTestId: GetAllByQuery<TextMatch, ByTestIdOptions>;
+  queryByTestId: QueryByQuery<TextMatch, ByTestIdOptions>;
+  queryAllByTestId: QueryAllByQuery<TextMatch, ByTestIdOptions>;
+  findByTestId: FindByQuery<TextMatch, ByTestIdOptions>;
+  findAllByTestId: FindAllByQuery<TextMatch, ByTestIdOptions>;
+};
+
+export const bindByTestIdQueries = (
+  instance: ReactTestInstance
+): ByTestIdQueries => ({
+  getByTestId: getBy(instance),
+  getAllByTestId: getAllBy(instance),
+  queryByTestId: queryBy(instance),
+  queryAllByTestId: queryAllBy(instance),
+  findByTestId: findBy(instance),
+  findAllByTestId: findAllBy(instance),
+});

package/src/queries/text.ts

@@ -0,0 +1,66 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { filterNodeByType } from '../helpers/filterNodeByType';
+import { findAll } from '../helpers/findAll';
+import { getHostComponentNames } from '../helpers/host-component-names';
+import { matchTextContent } from '../helpers/matchers/matchTextContent';
+import { TextMatch, TextMatchOptions } from '../matches';
+import { makeQueries } from './makeQueries';
+import type {
+  FindAllByQuery,
+  FindByQuery,
+  GetAllByQuery,
+  GetByQuery,
+  QueryAllByQuery,
+  QueryByQuery,
+} from './makeQueries';
+import type { CommonQueryOptions } from './options';
+
+type ByTextOptions = CommonQueryOptions & TextMatchOptions;
+
+const queryAllByText = (
+  instance: ReactTestInstance
+): ((text: TextMatch, options?: ByTextOptions) => Array<ReactTestInstance>) =>
+  function queryAllByTextFn(text, options = {}) {
+    return findAll(
+      instance,
+      (node) =>
+        filterNodeByType(node, getHostComponentNames().text) &&
+        matchTextContent(node, text, options),
+      {
+        ...options,
+        matchDeepestOnly: true,
+      }
+    );
+  };
+
+const getMultipleError = (text: TextMatch) =>
+  `Found multiple elements with text: ${String(text)}`;
+
+const getMissingError = (text: TextMatch) =>
+  `Unable to find an element with text: ${String(text)}`;
+
+const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries(
+  queryAllByText,
+  getMissingError,
+  getMultipleError
+);
+
+export type ByTextQueries = {
+  getByText: GetByQuery<TextMatch, ByTextOptions>;
+  getAllByText: GetAllByQuery<TextMatch, ByTextOptions>;
+  queryByText: QueryByQuery<TextMatch, ByTextOptions>;
+  queryAllByText: QueryAllByQuery<TextMatch, ByTextOptions>;
+  findByText: FindByQuery<TextMatch, ByTextOptions>;
+  findAllByText: FindAllByQuery<TextMatch, ByTextOptions>;
+};
+
+export const bindByTextQueries = (
+  instance: ReactTestInstance
+): ByTextQueries => ({
+  getByText: getBy(instance),
+  getAllByText: getAllBy(instance),
+  queryByText: queryBy(instance),
+  queryAllByText: queryAllBy(instance),
+  findByText: findBy(instance),
+  findAllByText: findAllBy(instance),
+});

package/src/queries/unsafeProps.ts

@@ -0,0 +1,76 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import prettyFormat from 'pretty-format';
+import { ErrorWithStack, prepareErrorMessage } from '../helpers/errors';
+import { createQueryByError } from '../helpers/errors';
+
+const UNSAFE_getByProps = (
+  instance: ReactTestInstance
+): ((props: { [propName: string]: any }) => ReactTestInstance) =>
+  function getByPropsFn(props: { [propName: string]: any }) {
+    try {
+      return instance.findByProps(props);
+    } catch (error) {
+      throw new ErrorWithStack(prepareErrorMessage(error), getByPropsFn);
+    }
+  };
+
+const UNSAFE_getAllByProps = (
+  instance: ReactTestInstance
+): ((props: { [propName: string]: any }) => Array<ReactTestInstance>) =>
+  function getAllByPropsFn(props: { [propName: string]: any }) {
+    const results = instance.findAllByProps(props);
+    if (results.length === 0) {
+      throw new ErrorWithStack(
+        `No instances found with props:\n${prettyFormat(props)}`,
+        getAllByPropsFn
+      );
+    }
+    return results;
+  };
+
+const UNSAFE_queryByProps = (
+  instance: ReactTestInstance
+): ((props: { [propName: string]: any }) => ReactTestInstance | null) =>
+  function queryByPropsFn(props: { [propName: string]: any }) {
+    try {
+      return UNSAFE_getByProps(instance)(props);
+    } catch (error) {
+      return createQueryByError(error, queryByPropsFn);
+    }
+  };
+
+const UNSAFE_queryAllByProps =
+  (
+    instance: ReactTestInstance
+  ): ((props: { [propName: string]: any }) => Array<ReactTestInstance>) =>
+  (props: { [propName: string]: any }) => {
+    try {
+      return UNSAFE_getAllByProps(instance)(props);
+    } catch (error) {
+      return [];
+    }
+  };
+
+// Unsafe aliases
+export type UnsafeByPropsQueries = {
+  UNSAFE_getByProps: (props: { [key: string]: any }) => ReactTestInstance;
+  UNSAFE_getAllByProps: (props: {
+    [key: string]: any;
+  }) => Array<ReactTestInstance>;
+  UNSAFE_queryByProps: (props: {
+    [key: string]: any;
+  }) => ReactTestInstance | null;
+  UNSAFE_queryAllByProps: (props: {
+    [key: string]: any;
+  }) => Array<ReactTestInstance>;
+};
+
+// TODO: migrate to makeQueries pattern
+export const bindUnsafeByPropsQueries = (
+  instance: ReactTestInstance
+): UnsafeByPropsQueries => ({
+  UNSAFE_getByProps: UNSAFE_getByProps(instance),
+  UNSAFE_getAllByProps: UNSAFE_getAllByProps(instance),
+  UNSAFE_queryByProps: UNSAFE_queryByProps(instance),
+  UNSAFE_queryAllByProps: UNSAFE_queryAllByProps(instance),
+});

package/src/queries/unsafeType.ts

@@ -0,0 +1,73 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import * as React from 'react';
+import { ErrorWithStack, prepareErrorMessage } from '../helpers/errors';
+import { createQueryByError } from '../helpers/errors';
+
+const UNSAFE_getByType = (
+  instance: ReactTestInstance
+): ((type: React.ComponentType<any>) => ReactTestInstance) =>
+  function getByTypeFn(type: React.ComponentType<any>) {
+    try {
+      return instance.findByType(type);
+    } catch (error) {
+      throw new ErrorWithStack(prepareErrorMessage(error), getByTypeFn);
+    }
+  };
+
+const UNSAFE_getAllByType = (
+  instance: ReactTestInstance
+): ((type: React.ComponentType<any>) => Array<ReactTestInstance>) =>
+  function getAllByTypeFn(type: React.ComponentType<any>) {
+    const results = instance.findAllByType(type);
+    if (results.length === 0) {
+      throw new ErrorWithStack('No instances found', getAllByTypeFn);
+    }
+    return results;
+  };
+
+const UNSAFE_queryByType = (
+  instance: ReactTestInstance
+): ((type: React.ComponentType<any>) => ReactTestInstance | null) =>
+  function queryByTypeFn(type: React.ComponentType<any>) {
+    try {
+      return UNSAFE_getByType(instance)(type);
+    } catch (error) {
+      return createQueryByError(error, queryByTypeFn);
+    }
+  };
+
+const UNSAFE_queryAllByType =
+  (
+    instance: ReactTestInstance
+  ): ((type: React.ComponentType<any>) => Array<ReactTestInstance>) =>
+  (type: React.ComponentType<any>) => {
+    try {
+      return UNSAFE_getAllByType(instance)(type);
+    } catch (error) {
+      return [];
+    }
+  };
+
+// Unsafe aliases
+export type UnsafeByTypeQueries = {
+  UNSAFE_getByType: <P>(type: React.ComponentType<P>) => ReactTestInstance;
+  UNSAFE_getAllByType: <P>(
+    type: React.ComponentType<P>
+  ) => Array<ReactTestInstance>;
+  UNSAFE_queryByType: <P>(
+    type: React.ComponentType<P>
+  ) => ReactTestInstance | null;
+  UNSAFE_queryAllByType: <P>(
+    type: React.ComponentType<P>
+  ) => Array<ReactTestInstance>;
+};
+
+// TODO: migrate to makeQueries pattern
+export const bindUnsafeByTypeQueries = (
+  instance: ReactTestInstance
+): UnsafeByTypeQueries => ({
+  UNSAFE_getByType: UNSAFE_getByType(instance),
+  UNSAFE_getAllByType: UNSAFE_getAllByType(instance),
+  UNSAFE_queryByType: UNSAFE_queryByType(instance),
+  UNSAFE_queryAllByType: UNSAFE_queryAllByType(instance),
+});

package/src/react-versions.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export function checkReactVersionAtLeast(
+  major: number,
+  minor: number
+): boolean {
+  if (React.version === undefined) return false;
+  const [actualMajor, actualMinor] = React.version.split('.').map(Number);
+
+  return actualMajor > major || (actualMajor === major && actualMinor >= minor);
+}

package/src/render-act.ts

@@ -0,0 +1,19 @@
+import TestRenderer from 'react-test-renderer';
+import type {
+  ReactTestRenderer,
+  TestRendererOptions,
+} from 'react-test-renderer';
+
+export function renderWithAct(
+  component: React.ReactElement,
+  options?: TestRendererOptions
+): ReactTestRenderer {
+  let renderer: ReactTestRenderer;
+
+  TestRenderer.act(() => {
+    renderer = TestRenderer.create(component, options);
+  });
+
+  // @ts-ignore act is synchronous, so renderer is already initialised here
+  return renderer;
+}