@testing-library/react-native 12.1.2 → 12.2.0

package/src/queries/__tests__/text.test.tsx

@@ -0,0 +1,556 @@
+import * as React from 'react';
+import {
+  Button,
+  Image,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { getDefaultNormalizer, render, within } from '../..';
+
+test('byText matches simple text', () => {
+  const { getByText } = render(<Text testID="text">Hello World</Text>);
+  expect(getByText('Hello World').props.testID).toBe('text');
+});
+
+test('byText matches inner nested text', () => {
+  const { getByText } = render(
+    <Text testID="outer">
+      <Text testID="inner">Hello World</Text>
+    </Text>
+  );
+  expect(getByText('Hello World').props.testID).toBe('inner');
+});
+
+test('byText matches accross multiple texts', () => {
+  const { getByText } = render(
+    <Text testID="outer">
+      <Text testID="inner-1">Hello</Text> <Text testID="inner-2">World</Text>
+    </Text>
+  );
+  expect(getByText('Hello World').props.testID).toBe('outer');
+});
+
+type MyButtonProps = {
+  children: React.ReactNode;
+  onPress: () => void;
+};
+const MyButton = ({ children, onPress }: MyButtonProps) => (
+  <TouchableOpacity onPress={onPress}>
+    <Text>{children}</Text>
+  </TouchableOpacity>
+);
+
+const Banana = () => {
+  const test = 0;
+  return (
+    <View>
+      <Text>Is the banana fresh?</Text>
+      <Text testID="bananaFresh">not fresh</Text>
+
+      <MyButton onPress={jest.fn()}>Change freshness!</MyButton>
+      <Text testID="duplicateText">First Text</Text>
+      <Text testID="duplicateText">Second Text</Text>
+      <Text>{test}</Text>
+    </View>
+  );
+};
+
+type ChildrenProps = { children: React.ReactNode };
+
+test('getByText, queryByText', () => {
+  const { getByText, queryByText } = render(<Banana />);
+  const button = getByText(/change/i);
+
+  expect(button.props.children).toBe('Change freshness!');
+
+  const sameButton = getByText('not fresh');
+
+  expect(sameButton.props.children).toBe('not fresh');
+  expect(() => getByText('InExistent')).toThrow(
+    'Unable to find an element with text: InExistent'
+  );
+
+  const zeroText = getByText('0');
+
+  expect(queryByText(/change/i)).toBe(button);
+  expect(queryByText('InExistent')).toBeNull();
+  expect(() => queryByText(/fresh/)).toThrow(
+    'Found multiple elements with text: /fresh/'
+  );
+  expect(queryByText('0')).toBe(zeroText);
+});
+
+test('getByText, queryByText with children as Array', () => {
+  type BananaCounterProps = { numBananas: number };
+  const BananaCounter = ({ numBananas }: BananaCounterProps) => (
+    <Text>There are {numBananas} bananas in the bunch</Text>
+  );
+
+  const BananaStore = () => (
+    <View>
+      <BananaCounter numBananas={3} />
+      <BananaCounter numBananas={6} />
+      <BananaCounter numBananas={5} />
+    </View>
+  );
+
+  const { getByText } = render(<BananaStore />);
+
+  const threeBananaBunch = getByText('There are 3 bananas in the bunch');
+  expect(threeBananaBunch.props.children).toEqual([
+    'There are ',
+    3,
+    ' bananas in the bunch',
+  ]);
+});
+
+test('getAllByText, queryAllByText', () => {
+  const { getAllByText, queryAllByText } = render(<Banana />);
+  const buttons = getAllByText(/fresh/i);
+
+  expect(buttons).toHaveLength(3);
+  expect(() => getAllByText('InExistent')).toThrow(
+    'Unable to find an element with text: InExistent'
+  );
+
+  expect(queryAllByText(/fresh/i)).toEqual(buttons);
+  expect(queryAllByText('InExistent')).toHaveLength(0);
+});
+
+test('findByText queries work asynchronously', async () => {
+  const options = { timeout: 10 }; // Short timeout so that this test runs quickly
+  const { rerender, findByText, findAllByText } = render(<View />);
+  await expect(findByText('Some Text', {}, options)).rejects.toBeTruthy();
+  await expect(findAllByText('Some Text', {}, options)).rejects.toBeTruthy();
+
+  setTimeout(
+    () =>
+      rerender(
+        <View>
+          <Text>Some Text</Text>
+        </View>
+      ),
+    20
+  );
+
+  await expect(findByText('Some Text')).resolves.toBeTruthy();
+  await expect(findAllByText('Some Text')).resolves.toHaveLength(1);
+}, 20000);
+
+test('getByText works properly with custom text component', () => {
+  function BoldText({ children }: ChildrenProps) {
+    return <Text>{children}</Text>;
+  }
+
+  expect(
+    render(
+      <Text>
+        <BoldText>Hello</BoldText>
+      </Text>
+    ).getByText('Hello')
+  ).toBeTruthy();
+});
+
+test('getByText works properly with custom text container', () => {
+  function MyText({ children }: ChildrenProps) {
+    return <Text>{children}</Text>;
+  }
+  function BoldText({ children }: ChildrenProps) {
+    return <Text>{children}</Text>;
+  }
+
+  expect(
+    render(
+      <MyText>
+        <BoldText>Hello</BoldText>
+      </MyText>
+    ).getByText('Hello')
+  ).toBeTruthy();
+});
+
+test('queryByText nested <Image> in <Text> at start', () => {
+  expect(
+    render(
+      <Text>
+        <Image source={{}} />
+        Hello
+      </Text>
+    ).queryByText('Hello')
+  ).toBeTruthy();
+});
+
+test('queryByText nested <Image> in <Text> at end', () => {
+  expect(
+    render(
+      <Text>
+        Hello
+        <Image source={{}} />
+      </Text>
+    ).queryByText('Hello')
+  ).toBeTruthy();
+});
+
+test('queryByText nested <Image> in <Text> in middle', () => {
+  expect(
+    render(
+      <Text>
+        Hello
+        <Image source={{}} />
+        World
+      </Text>
+    ).queryByText('HelloWorld')
+  ).toBeTruthy();
+});
+
+test('queryByText not found', () => {
+  expect(
+    render(
+      <Text>
+        Hello
+        <Image source={{}} />
+      </Text>
+    ).queryByText('SomethingElse')
+  ).toBeFalsy();
+});
+
+test('*ByText matches text across multiple nested Text', () => {
+  const { getByText } = render(
+    <Text nativeID="1">
+      Hello{' '}
+      <Text nativeID="2">
+        World
+        <Text>!{true}</Text>
+      </Text>
+    </Text>
+  );
+
+  expect(getByText('Hello World!')).toBeTruthy();
+});
+
+test('queryByText with nested Text components return the closest Text', () => {
+  const NestedTexts = () => (
+    <Text nativeID="1">
+      <Text nativeID="2">My text</Text>
+    </Text>
+  );
+
+  const { queryByText } = render(<NestedTexts />);
+  expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
+});
+
+test('queryByText with nested Text components each with text return the lowest one', () => {
+  const NestedTexts = () => (
+    <Text nativeID="1">
+      bob
+      <Text nativeID="2">My text</Text>
+    </Text>
+  );
+
+  const { queryByText } = render(<NestedTexts />);
+
+  expect(queryByText('My text', { exact: false })?.props.nativeID).toBe('2');
+});
+
+test('queryByText nested deep <CustomText> in <Text>', () => {
+  const CustomText = ({ children }: ChildrenProps) => {
+    return <Text>{children}</Text>;
+  };
+
+  expect(
+    render(
+      <Text>
+        <CustomText>Hello</CustomText> <CustomText>World!</CustomText>
+      </Text>
+    ).getByText('Hello World!')
+  ).toBeTruthy();
+});
+
+test('queryByText with nested Text components: not-exact text match returns the most deeply nested common component', () => {
+  const { queryByText: queryByTextFirstCase } = render(
+    <Text nativeID="1">
+      bob
+      <Text nativeID="2">My </Text>
+      <Text nativeID="3">text</Text>
+    </Text>
+  );
+
+  const { queryByText: queryByTextSecondCase } = render(
+    <Text nativeID="1">
+      bob
+      <Text nativeID="2">My text for test</Text>
+    </Text>
+  );
+
+  expect(queryByTextFirstCase('My text')).toBe(null);
+  expect(
+    queryByTextSecondCase('My text', { exact: false })?.props.nativeID
+  ).toBe('2');
+});
+
+test('queryAllByText does not match several times the same text', () => {
+  const allMatched = render(
+    <Text nativeID="1">
+      Start
+      <Text nativeID="2">This is a long text</Text>
+    </Text>
+  ).queryAllByText('long text', { exact: false });
+  expect(allMatched.length).toBe(1);
+  expect(allMatched[0].props.nativeID).toBe('2');
+});
+
+test('queryAllByText matches all the matching nodes', () => {
+  const allMatched = render(
+    <Text nativeID="1">
+      Start
+      <Text nativeID="2">This is a long text</Text>
+      <Text nativeID="3">This is another long text</Text>
+    </Text>
+  ).queryAllByText('long text', { exact: false });
+  expect(allMatched.length).toBe(2);
+  expect(allMatched.map((node) => node.props.nativeID)).toEqual(['2', '3']);
+});
+
+describe('supports TextMatch options', () => {
+  test('getByText, getAllByText', () => {
+    const { getByText, getAllByText } = render(
+      <View>
+        <Text testID="text">Text and details</Text>
+        <Button
+          testID="button"
+          title="Button and a detail"
+          onPress={jest.fn()}
+        />
+      </View>
+    );
+
+    expect(getByText('details', { exact: false })).toBeTruthy();
+    expect(getAllByText('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('getByPlaceholderText, getAllByPlaceholderText', () => {
+    const { getByPlaceholderText, getAllByPlaceholderText } = render(
+      <View>
+        <TextInput placeholder={'Placeholder with details'} />
+        <TextInput placeholder={'Placeholder with a DETAIL'} />
+      </View>
+    );
+
+    expect(getByPlaceholderText('details', { exact: false })).toBeTruthy();
+    expect(getAllByPlaceholderText('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('getByDisplayValue, getAllByDisplayValue', () => {
+    const { getByDisplayValue, getAllByDisplayValue } = render(
+      <View>
+        <TextInput value={'Value with details'} />
+        <TextInput value={'Value with a detail'} />
+      </View>
+    );
+
+    expect(getByDisplayValue('details', { exact: false })).toBeTruthy();
+    expect(getAllByDisplayValue('detail', { exact: false })).toHaveLength(2);
+  });
+
+  test('getByTestId, getAllByTestId', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <View>
+        <View testID="test" />
+        <View testID="tests id" />
+      </View>
+    );
+    expect(getByTestId('id', { exact: false })).toBeTruthy();
+    expect(getAllByTestId('test', { exact: false })).toHaveLength(2);
+  });
+
+  test('with TextMatch option exact === false text search is NOT case sensitive', () => {
+    const { getByText, getAllByText } = render(
+      <View>
+        <Text testID="text">Text and details</Text>
+        <Button
+          testID="button"
+          title="Button and a DeTAil"
+          onPress={jest.fn()}
+        />
+      </View>
+    );
+
+    expect(getByText('DeTaIlS', { exact: false })).toBeTruthy();
+    expect(getAllByText('detail', { exact: false })).toHaveLength(2);
+  });
+});
+
+describe('Supports normalization', () => {
+  test('trims and collapses whitespace by default', () => {
+    const { getByText } = render(
+      <View>
+        <Text>{`  Text     and
+
+        whitespace`}</Text>
+      </View>
+    );
+
+    expect(getByText('Text and whitespace')).toBeTruthy();
+  });
+
+  test('trim and collapseWhitespace is customizable by getDefaultNormalizer param', () => {
+    const testTextWithWhitespace = `  Text     and
+
+        whitespace`;
+    const { getByText } = render(
+      <View>
+        <Text>{testTextWithWhitespace}</Text>
+      </View>
+    );
+
+    expect(
+      getByText(testTextWithWhitespace, {
+        normalizer: getDefaultNormalizer({
+          trim: false,
+          collapseWhitespace: false,
+        }),
+      })
+    ).toBeTruthy();
+  });
+
+  test('normalizer function is customisable', () => {
+    const testText = 'A TO REMOVE text';
+    const normalizerFn = (textToNormalize: string) =>
+      textToNormalize.replace('TO REMOVE ', '');
+    const { getByText } = render(
+      <View>
+        <Text>{testText}</Text>
+      </View>
+    );
+
+    expect(getByText('A text', { normalizer: normalizerFn })).toBeTruthy();
+  });
+});
+
+test('getByText and queryByText work properly with text nested in React.Fragment', () => {
+  const { getByText, queryByText } = render(
+    <Text>
+      <>Hello</>
+    </Text>
+  );
+  expect(getByText('Hello')).toBeTruthy();
+  expect(queryByText('Hello')).not.toBeNull();
+});
+
+test('getByText and queryByText work properly with text partially nested in React.Fragment', () => {
+  const { getByText, queryByText } = render(
+    <Text>
+      He<>llo</>
+    </Text>
+  );
+  expect(getByText('Hello')).toBeTruthy();
+  expect(queryByText('Hello')).not.toBeNull();
+});
+
+test('getByText and queryByText work properly with multiple nested fragments', () => {
+  const { getByText, queryByText } = render(
+    <Text>
+      He
+      <>
+        l<>l</>o
+      </>
+    </Text>
+  );
+  expect(getByText('Hello')).toBeTruthy();
+  expect(queryByText('Hello')).not.toBeNull();
+});
+
+test('getByText and queryByText work with newlines', () => {
+  const textWithNewLines = 'Line 1\nLine 2';
+  const { getByText, queryByText } = render(<Text>{textWithNewLines}</Text>);
+  expect(getByText(textWithNewLines)).toBeTruthy();
+  expect(queryByText(textWithNewLines)).toBeTruthy();
+});
+
+test('getByText and queryByText work with tabs', () => {
+  const textWithTabs = 'Line 1\tLine 2';
+  const { getByText, queryByText } = render(<Text>{textWithTabs}</Text>);
+  expect(getByText(textWithTabs)).toBeTruthy();
+  expect(queryByText(textWithTabs)).toBeTruthy();
+});
+
+test('getByText searches for text within itself', () => {
+  const { getByText } = render(<Text testID="subject">Hello</Text>);
+  const textNode = within(getByText('Hello'));
+  expect(textNode.getByText('Hello')).toBeTruthy();
+});
+
+test('getByText searches for text within self host element', () => {
+  const { getByTestId } = render(<Text testID="subject">Hello</Text>);
+  const textNode = within(getByTestId('subject'));
+  expect(textNode.getByText('Hello')).toBeTruthy();
+});
+
+test('byText support hidden option', () => {
+  const { getByText, queryByText } = render(
+    <Text style={{ display: 'none' }}>Hidden from accessibility</Text>
+  );
+
+  expect(getByText(/hidden/i, { includeHiddenElements: true })).toBeTruthy();
+
+  expect(queryByText(/hidden/i)).toBeFalsy();
+  expect(queryByText(/hidden/i, { includeHiddenElements: false })).toBeFalsy();
+  expect(() => getByText(/hidden/i, { includeHiddenElements: false }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with text: /hidden/i
+
+    <Text
+      style={
+        {
+          "display": "none",
+        }
+      }
+    >
+      Hidden from accessibility
+    </Text>"
+  `);
+});
+
+test('error message renders the element tree, preserving only helpful props', async () => {
+  const view = render(<View accessibilityViewIsModal key="this is filtered" />);
+
+  expect(() => view.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <View
+        accessibilityViewIsModal={true}
+      />"
+    `);
+
+  expect(() => view.getAllByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <View
+        accessibilityViewIsModal={true}
+      />"
+    `);
+
+  await expect(view.findByText(/foo/)).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <View
+        accessibilityViewIsModal={true}
+      />"
+    `);
+
+  await expect(view.findAllByText(/foo/)).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <View
+        accessibilityViewIsModal={true}
+      />"
+    `);
+});
+
+test('byText should return host component', () => {
+  const { getByText } = render(<Text>hello</Text>);
+  expect(getByText('hello').type).toBe('Text');
+});

package/src/queries/a11yState.ts

@@ -0,0 +1,131 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+import { accessibilityStateKeys } from '../helpers/accessiblity';
+import { deprecateQueries } from '../helpers/deprecation';
+import { findAll } from '../helpers/findAll';
+import {
+  AccessibilityStateMatcher,
+  matchAccessibilityState,
+} from '../helpers/matchers/accessibilityState';
+import { makeQueries } from './makeQueries';
+import type {
+  FindAllByQuery,
+  FindByQuery,
+  GetAllByQuery,
+  GetByQuery,
+  QueryAllByQuery,
+  QueryByQuery,
+} from './makeQueries';
+import { CommonQueryOptions } from './options';
+
+const queryAllByA11yState = (
+  instance: ReactTestInstance
+): ((
+  matcher: AccessibilityStateMatcher,
+  queryOptions?: CommonQueryOptions
+) => Array<ReactTestInstance>) =>
+  function queryAllByA11yStateFn(matcher, queryOptions) {
+    return findAll(
+      instance,
+      (node) =>
+        typeof node.type === 'string' && matchAccessibilityState(node, matcher),
+      queryOptions
+    );
+  };
+
+const buildErrorMessage = (state: AccessibilityStateMatcher = {}) => {
+  const errors: string[] = [];
+
+  accessibilityStateKeys.forEach((stateKey) => {
+    if (state[stateKey] !== undefined) {
+      errors.push(`${stateKey} state: ${state[stateKey]}`);
+    }
+  });
+
+  return errors.join(', ');
+};
+
+const getMultipleError = (state: AccessibilityStateMatcher) =>
+  `Found multiple elements with ${buildErrorMessage(state)}`;
+
+const getMissingError = (state: AccessibilityStateMatcher) =>
+  `Unable to find an element with ${buildErrorMessage(state)}`;
+
+const { getBy, getAllBy, queryBy, queryAllBy, findBy, findAllBy } = makeQueries(
+  queryAllByA11yState,
+  getMissingError,
+  getMultipleError
+);
+
+export type ByA11yStateQueries = {
+  getByA11yState: GetByQuery<AccessibilityStateMatcher, CommonQueryOptions>;
+  getAllByA11yState: GetAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  queryByA11yState: QueryByQuery<AccessibilityStateMatcher, CommonQueryOptions>;
+  queryAllByA11yState: QueryAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  findByA11yState: FindByQuery<AccessibilityStateMatcher, CommonQueryOptions>;
+  findAllByA11yState: FindAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+
+  getByAccessibilityState: GetByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  getAllByAccessibilityState: GetAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  queryByAccessibilityState: QueryByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  queryAllByAccessibilityState: QueryAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  findByAccessibilityState: FindByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+  findAllByAccessibilityState: FindAllByQuery<
+    AccessibilityStateMatcher,
+    CommonQueryOptions
+  >;
+};
+
+export const bindByA11yStateQueries = (
+  instance: ReactTestInstance
+): ByA11yStateQueries => {
+  const getByA11yState = getBy(instance);
+  const getAllByA11yState = getAllBy(instance);
+  const queryByA11yState = queryBy(instance);
+  const queryAllByA11yState = queryAllBy(instance);
+  const findByA11yState = findBy(instance);
+  const findAllByA11yState = findAllBy(instance);
+
+  return {
+    ...deprecateQueries(
+      {
+        getByA11yState,
+        getAllByA11yState,
+        queryByA11yState,
+        queryAllByA11yState,
+        findByA11yState,
+        findAllByA11yState,
+        getByAccessibilityState: getByA11yState,
+        getAllByAccessibilityState: getAllByA11yState,
+        queryByAccessibilityState: queryByA11yState,
+        queryAllByAccessibilityState: queryAllByA11yState,
+        findByAccessibilityState: findByA11yState,
+        findAllByAccessibilityState: findAllByA11yState,
+      },
+      'Use {queryPrefix}ByRole(role, { disabled, selected, checked, busy, expanded }) query or expect(...).toHaveAccessibilityState(...) matcher from "@testing-library/jest-native" package instead.'
+    ),
+  };
+};