@testing-library/react-native 12.1.2 → 12.2.0

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

@@ -0,0 +1,309 @@
+/* eslint-disable no-console */
+import * as React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { render } from '../..';
+
+type ConsoleLogMock = jest.Mock<typeof console.log>;
+
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {});
+});
+
+const TEXT_LABEL = 'cool text';
+
+const Typography = ({ children, ...rest }: any) => {
+  return <Text {...rest}>{children}</Text>;
+};
+
+const Button = ({ children }: { children: React.ReactNode }) => (
+  <TouchableOpacity>
+    <Typography accessibilityValue={{ min: 40, max: 60 }}>
+      {children}
+    </Typography>
+  </TouchableOpacity>
+);
+
+const Section = () => (
+  <>
+    <Typography accessibilityValue={{ max: 60 }}>Title</Typography>
+    <Button>{TEXT_LABEL}</Button>
+  </>
+);
+
+test('getByA11yValue, queryByA11yValue, findByA11yValue', async () => {
+  const { getByA11yValue, queryByA11yValue, findByA11yValue } = render(
+    <Section />
+  );
+
+  expect(getByA11yValue({ min: 40 }).props.accessibilityValue).toEqual({
+    min: 40,
+    max: 60,
+  });
+  expect(queryByA11yValue({ min: 40 })?.props.accessibilityValue).toEqual({
+    min: 40,
+    max: 60,
+  });
+
+  expect(() => getByA11yValue({ min: 50 })).toThrow(
+    'Unable to find an element with min value: 50'
+  );
+  expect(queryByA11yValue({ min: 50 })).toEqual(null);
+
+  expect(() => getByA11yValue({ max: 60 })).toThrow(
+    'Found multiple elements with max value: 60'
+  );
+  expect(() => queryByA11yValue({ max: 60 })).toThrow(
+    'Found multiple elements with max value: 60'
+  );
+
+  const asyncElement = await findByA11yValue({ min: 40 });
+  expect(asyncElement.props.accessibilityValue).toEqual({
+    min: 40,
+    max: 60,
+  });
+  await expect(findByA11yValue({ min: 50 })).rejects.toThrow(
+    'Unable to find an element with min value: 50'
+  );
+  await expect(findByA11yValue({ max: 60 })).rejects.toThrow(
+    'Found multiple elements with max value: 60'
+  );
+});
+
+test('getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue', async () => {
+  const { getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue } = render(
+    <Section />
+  );
+
+  expect(getAllByA11yValue({ min: 40 })).toHaveLength(1);
+  expect(queryAllByA11yValue({ min: 40 })).toHaveLength(1);
+
+  expect(() => getAllByA11yValue({ min: 50 })).toThrow(
+    'Unable to find an element with min value: 50'
+  );
+  expect(queryAllByA11yValue({ min: 50 })).toEqual([]);
+
+  expect(queryAllByA11yValue({ max: 60 })).toHaveLength(2);
+  expect(getAllByA11yValue({ max: 60 })).toHaveLength(2);
+
+  await expect(findAllByA11yValue({ min: 40 })).resolves.toHaveLength(1);
+  await expect(findAllByA11yValue({ min: 50 })).rejects.toThrow(
+    'Unable to find an element with min value: 50'
+  );
+  await expect(findAllByA11yValue({ max: 60 })).resolves.toHaveLength(2);
+});
+
+test('byA11yValue queries support hidden option', () => {
+  const { getByA11yValue, queryByA11yValue } = render(
+    <Text accessibilityValue={{ max: 10 }} style={{ display: 'none' }}>
+      Hidden from accessibility
+    </Text>
+  );
+
+  expect(
+    getByA11yValue({ max: 10 }, { includeHiddenElements: true })
+  ).toBeTruthy();
+
+  expect(queryByA11yValue({ max: 10 })).toBeFalsy();
+  expect(
+    queryByA11yValue({ max: 10 }, { includeHiddenElements: false })
+  ).toBeFalsy();
+  expect(() => getByA11yValue({ max: 10 }, { includeHiddenElements: false }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with max value: 10
+
+    <Text
+      accessibilityValue={
+        {
+          "max": 10,
+        }
+      }
+      style={
+        {
+          "display": "none",
+        }
+      }
+    >
+      Hidden from accessibility
+    </Text>"
+  `);
+});
+
+test('byA11yValue error messages', () => {
+  const { getByA11yValue } = render(<View />);
+  expect(() => getByA11yValue({ min: 10, max: 10 }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with min value: 10, max value: 10
+
+    <View />"
+  `);
+  expect(() => getByA11yValue({ max: 20, now: 5 }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with max value: 20, now value: 5
+
+    <View />"
+  `);
+  expect(() => getByA11yValue({ min: 1, max: 2, now: 3 }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with min value: 1, max value: 2, now value: 3
+
+    <View />"
+  `);
+  expect(() => getByA11yValue({ min: 1, max: 2, now: 3, text: /foo/i }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with min value: 1, max value: 2, now value: 3, text value: /foo/i
+
+    <View />"
+  `);
+});
+
+test('*ByA11yValue deprecation warnings', () => {
+  const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
+  const view = render(<View accessibilityValue={{ min: 10 }} />);
+
+  view.getByA11yValue({ min: 10 });
+  expect(mockCalls[0][0]).toMatchInlineSnapshot(`
+    "getByA11yValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or getByRole(role, { value: ... }) query instead."
+  `);
+
+  view.getAllByA11yValue({ min: 10 });
+  expect(mockCalls[1][0]).toMatchInlineSnapshot(`
+    "getAllByA11yValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or getAllByRole(role, { value: ... }) query instead."
+  `);
+
+  view.queryByA11yValue({ min: 10 });
+  expect(mockCalls[2][0]).toMatchInlineSnapshot(`
+    "queryByA11yValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or queryByRole(role, { value: ... }) query instead."
+  `);
+
+  view.queryAllByA11yValue({ min: 10 });
+  expect(mockCalls[3][0]).toMatchInlineSnapshot(`
+    "queryAllByA11yValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or queryAllByRole(role, { value: ... }) query instead."
+  `);
+
+  view.findByA11yValue({ min: 10 });
+  expect(mockCalls[4][0]).toMatchInlineSnapshot(`
+    "findByA11yValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or findByRole(role, { value: ... }) query instead."
+  `);
+
+  view.findAllByA11yValue({ min: 10 });
+  expect(mockCalls[5][0]).toMatchInlineSnapshot(`
+    "findAllByA11yValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or findAllByRole(role, { value: ... }) query instead."
+  `);
+});
+
+test('*ByAccessibilityValue deprecation warnings', () => {
+  const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
+  const view = render(<View accessibilityValue={{ min: 10 }} />);
+
+  view.getByAccessibilityValue({ min: 10 });
+  expect(mockCalls[0][0]).toMatchInlineSnapshot(`
+    "getByAccessibilityValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or getByRole(role, { value: ... }) query instead."
+  `);
+
+  view.getAllByAccessibilityValue({ min: 10 });
+  expect(mockCalls[1][0]).toMatchInlineSnapshot(`
+    "getAllByAccessibilityValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or getAllByRole(role, { value: ... }) query instead."
+  `);
+
+  view.queryByAccessibilityValue({ min: 10 });
+  expect(mockCalls[2][0]).toMatchInlineSnapshot(`
+    "queryByAccessibilityValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or queryByRole(role, { value: ... }) query instead."
+  `);
+
+  view.queryAllByAccessibilityValue({ min: 10 });
+  expect(mockCalls[3][0]).toMatchInlineSnapshot(`
+    "queryAllByAccessibilityValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or queryAllByRole(role, { value: ... }) query instead."
+  `);
+
+  view.findByAccessibilityValue({ min: 10 });
+  expect(mockCalls[4][0]).toMatchInlineSnapshot(`
+    "findByAccessibilityValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or findByRole(role, { value: ... }) query instead."
+  `);
+
+  view.findAllByAccessibilityValue({ min: 10 });
+  expect(mockCalls[5][0]).toMatchInlineSnapshot(`
+    "findAllByAccessibilityValue(...) is deprecated and will be removed in the future.
+
+    Use expect(...).toHaveAccessibilityValue(...) matcher from "@testing-library/jest-native" package or findAllByRole(role, { value: ... }) query instead."
+  `);
+});
+
+test('error message renders the element tree, preserving only helpful props', async () => {
+  const view = render(
+    <View accessibilityValue={{ min: 2 }} key="NOT_RELEVANT" />
+  );
+
+  expect(() => view.getByA11yValue({ min: 1 }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with min value: 1
+
+    <View
+      accessibilityValue={
+        {
+          "min": 2,
+        }
+      }
+    />"
+  `);
+
+  expect(() => view.getAllByA11yValue({ min: 1 }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with min value: 1
+
+    <View
+      accessibilityValue={
+        {
+          "min": 2,
+        }
+      }
+    />"
+  `);
+
+  await expect(view.findByA11yValue({ min: 1 })).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with min value: 1
+
+    <View
+      accessibilityValue={
+        {
+          "min": 2,
+        }
+      }
+    />"
+  `);
+
+  await expect(view.findAllByA11yValue({ min: 1 })).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with min value: 1
+
+    <View
+      accessibilityValue={
+        {
+          "min": 2,
+        }
+      }
+    />"
+  `);
+});

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

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { TextInput, View } from 'react-native';
+
+import { render } from '../..';
+
+const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
+const PLACEHOLDER_CHEF = 'Who inspected freshness?';
+const INPUT_FRESHNESS = 'Custom Freshie';
+const INPUT_CHEF = 'I inspected freshie';
+const DEFAULT_INPUT_CHEF = 'What did you inspect?';
+const DEFAULT_INPUT_CUSTOMER = 'What banana?';
+
+const Banana = () => (
+  <View>
+    <TextInput
+      testID="bananaCustomFreshness"
+      placeholder={PLACEHOLDER_FRESHNESS}
+      value={INPUT_FRESHNESS}
+    />
+    <TextInput
+      testID="bananaChef"
+      placeholder={PLACEHOLDER_CHEF}
+      value={INPUT_CHEF}
+      defaultValue={DEFAULT_INPUT_CHEF}
+    />
+    <TextInput defaultValue={DEFAULT_INPUT_CUSTOMER} />
+    <TextInput defaultValue={'hello'} value="" />
+  </View>
+);
+
+test('getByDisplayValue, queryByDisplayValue', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
+  const input = getByDisplayValue(/custom/i);
+
+  expect(input.props.value).toBe(INPUT_FRESHNESS);
+
+  const sameInput = getByDisplayValue(INPUT_FRESHNESS);
+
+  expect(sameInput.props.value).toBe(INPUT_FRESHNESS);
+  expect(() => getByDisplayValue('no value')).toThrow(
+    'Unable to find an element with displayValue: no value'
+  );
+
+  expect(queryByDisplayValue(/custom/i)).toBe(input);
+  expect(queryByDisplayValue('no value')).toBeNull();
+  expect(() => queryByDisplayValue(/fresh/i)).toThrow(
+    'Found multiple elements with display value: /fresh/i'
+  );
+});
+
+test('getByDisplayValue, queryByDisplayValue get element by default value only when value is undefined', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(<Banana />);
+  expect(() => getByDisplayValue(DEFAULT_INPUT_CHEF))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with displayValue: What did you inspect?
+
+    <View>
+      <TextInput
+        placeholder="Add custom freshness"
+        testID="bananaCustomFreshness"
+        value="Custom Freshie"
+      />
+      <TextInput
+        defaultValue="What did you inspect?"
+        placeholder="Who inspected freshness?"
+        testID="bananaChef"
+        value="I inspected freshie"
+      />
+      <TextInput
+        defaultValue="What banana?"
+      />
+      <TextInput
+        defaultValue="hello"
+        value=""
+      />
+    </View>"
+  `);
+  expect(queryByDisplayValue(DEFAULT_INPUT_CHEF)).toBeNull();
+
+  expect(() => getByDisplayValue('hello')).toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with displayValue: hello
+
+    <View>
+      <TextInput
+        placeholder="Add custom freshness"
+        testID="bananaCustomFreshness"
+        value="Custom Freshie"
+      />
+      <TextInput
+        defaultValue="What did you inspect?"
+        placeholder="Who inspected freshness?"
+        testID="bananaChef"
+        value="I inspected freshie"
+      />
+      <TextInput
+        defaultValue="What banana?"
+      />
+      <TextInput
+        defaultValue="hello"
+        value=""
+      />
+    </View>"
+  `);
+  expect(queryByDisplayValue('hello')).toBeNull();
+
+  expect(getByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
+  expect(queryByDisplayValue(DEFAULT_INPUT_CUSTOMER)).toBeTruthy();
+});
+
+test('getAllByDisplayValue, queryAllByDisplayValue', () => {
+  const { getAllByDisplayValue, queryAllByDisplayValue } = render(<Banana />);
+  const inputs = getAllByDisplayValue(/fresh/i);
+
+  expect(inputs).toHaveLength(2);
+  expect(() => getAllByDisplayValue('no value')).toThrow(
+    'Unable to find an element with displayValue: no value'
+  );
+
+  expect(queryAllByDisplayValue(/fresh/i)).toEqual(inputs);
+  expect(queryAllByDisplayValue('no value')).toHaveLength(0);
+});
+
+test('findBy queries work asynchronously', async () => {
+  const options = { timeout: 10 }; // Short timeout so that this test runs quickly
+  const { rerender, findByDisplayValue, findAllByDisplayValue } = render(
+    <View />
+  );
+
+  await expect(
+    findByDisplayValue('Display Value', {}, options)
+  ).rejects.toBeTruthy();
+  await expect(
+    findAllByDisplayValue('Display Value', {}, options)
+  ).rejects.toBeTruthy();
+
+  setTimeout(
+    () =>
+      rerender(
+        <View>
+          <TextInput value="Display Value" />
+        </View>
+      ),
+    20
+  );
+
+  await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy();
+  await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1);
+}, 20000);
+
+test('byDisplayValue queries support hidden option', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(
+    <TextInput value="hidden" style={{ display: 'none' }} />
+  );
+
+  expect(
+    getByDisplayValue('hidden', { includeHiddenElements: true })
+  ).toBeTruthy();
+
+  expect(queryByDisplayValue('hidden')).toBeFalsy();
+  expect(
+    queryByDisplayValue('hidden', { includeHiddenElements: false })
+  ).toBeFalsy();
+  expect(() => getByDisplayValue('hidden', { includeHiddenElements: false }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with displayValue: hidden
+
+    <TextInput
+      style={
+        {
+          "display": "none",
+        }
+      }
+      value="hidden"
+    />"
+  `);
+});
+
+test('byDisplayValue should return host component', () => {
+  const { getByDisplayValue } = render(<TextInput value="value" />);
+
+  expect(getByDisplayValue('value').type).toBe('TextInput');
+});
+
+test('error message renders the element tree, preserving only helpful props', async () => {
+  const view = render(<TextInput value="1" key="3" />);
+
+  expect(() => view.getByDisplayValue('2')).toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with displayValue: 2
+
+    <TextInput
+      value="1"
+    />"
+  `);
+
+  expect(() => view.getAllByDisplayValue('2'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with displayValue: 2
+
+    <TextInput
+      value="1"
+    />"
+  `);
+
+  await expect(view.findByDisplayValue('2')).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with displayValue: 2
+
+    <TextInput
+      value="1"
+    />"
+  `);
+
+  await expect(view.findAllByDisplayValue('2')).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with displayValue: 2
+
+    <TextInput
+      value="1"
+    />"
+  `);
+});

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

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { TouchableOpacity, Text, View } from 'react-native';
+import { render } from '../..';
+
+const BUTTON_HINT = 'click this button';
+const TEXT_HINT = 'static text';
+// Little hack to make all the methods happy with type
+const NO_MATCHES_TEXT: any = 'not-existent-element';
+
+const getMultipleInstancesFoundMessage = (value: string) => {
+  return `Found multiple elements with accessibilityHint: ${value}`;
+};
+
+const getNoInstancesFoundMessage = (value: string) => {
+  return `Unable to find an element with accessibilityHint: ${value}`;
+};
+
+const Typography = ({ children, ...rest }: any) => {
+  return <Text {...rest}>{children}</Text>;
+};
+
+const Button = ({ children }: { children: React.ReactNode }) => (
+  <TouchableOpacity accessibilityHint={BUTTON_HINT}>
+    <Typography accessibilityHint={TEXT_HINT}>{children}</Typography>
+  </TouchableOpacity>
+);
+
+const Section = () => (
+  <>
+    <Typography accessibilityHint={TEXT_HINT}>Title</Typography>
+    <Button>Hello</Button>
+  </>
+);
+
+test('getByA11yHint, queryByA11yHint, findByA11yHint', async () => {
+  const { getByA11yHint, queryByA11yHint, findByA11yHint } = render(
+    <Section />
+  );
+
+  expect(getByA11yHint(BUTTON_HINT).props.accessibilityHint).toEqual(
+    BUTTON_HINT
+  );
+  const button = queryByA11yHint(BUTTON_HINT);
+  expect(button?.props.accessibilityHint).toEqual(BUTTON_HINT);
+
+  expect(() => getByA11yHint(NO_MATCHES_TEXT)).toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+  expect(queryByA11yHint(NO_MATCHES_TEXT)).toBeNull();
+
+  expect(() => getByA11yHint(TEXT_HINT)).toThrow(
+    getMultipleInstancesFoundMessage(TEXT_HINT)
+  );
+  expect(() => queryByA11yHint(TEXT_HINT)).toThrow(
+    getMultipleInstancesFoundMessage(TEXT_HINT)
+  );
+
+  const asyncButton = await findByA11yHint(BUTTON_HINT);
+  expect(asyncButton.props.accessibilityHint).toEqual(BUTTON_HINT);
+  await expect(findByA11yHint(NO_MATCHES_TEXT)).rejects.toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+
+  await expect(findByA11yHint(TEXT_HINT)).rejects.toThrow(
+    getMultipleInstancesFoundMessage(TEXT_HINT)
+  );
+});
+
+test('getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint', async () => {
+  const { getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint } = render(
+    <Section />
+  );
+
+  expect(getAllByA11yHint(TEXT_HINT)).toHaveLength(2);
+  expect(queryAllByA11yHint(TEXT_HINT)).toHaveLength(2);
+
+  expect(() => getAllByA11yHint(NO_MATCHES_TEXT)).toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+  expect(queryAllByA11yHint(NO_MATCHES_TEXT)).toEqual([]);
+
+  await expect(findAllByA11yHint(TEXT_HINT)).resolves.toHaveLength(2);
+  await expect(findAllByA11yHint(NO_MATCHES_TEXT)).rejects.toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+});
+
+test('getByHintText, getByHintText', () => {
+  const { getByHintText, getAllByHintText } = render(
+    <View>
+      <View accessibilityHint="test" />
+      <View accessibilityHint="tests id" />
+    </View>
+  );
+  expect(getByHintText('id', { exact: false })).toBeTruthy();
+  expect(getAllByHintText('test', { exact: false })).toHaveLength(2);
+});
+
+test('getByHintText, getByHintText and exact = true', () => {
+  const { queryByHintText, getAllByHintText } = render(
+    <View>
+      <View accessibilityHint="test" />
+      <View accessibilityHint="tests id" />
+    </View>
+  );
+  expect(queryByHintText('id', { exact: true })).toBeNull();
+  expect(getAllByHintText('test', { exact: true })).toHaveLength(1);
+});
+
+test('byHintText queries support hidden option', () => {
+  const { getByHintText, queryByHintText } = render(
+    <Text accessibilityHint="hidden" style={{ display: 'none' }}>
+      Hidden from accessiblity
+    </Text>
+  );
+
+  expect(getByHintText('hidden', { includeHiddenElements: true })).toBeTruthy();
+
+  expect(queryByHintText('hidden')).toBeFalsy();
+  expect(
+    queryByHintText('hidden', { includeHiddenElements: false })
+  ).toBeFalsy();
+  expect(() => getByHintText('hidden', { includeHiddenElements: false }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityHint: hidden
+
+    <Text
+      accessibilityHint="hidden"
+      style={
+        {
+          "display": "none",
+        }
+      }
+    >
+      Hidden from accessiblity
+    </Text>"
+  `);
+});
+
+test('error message renders the element tree, preserving only helpful props', async () => {
+  const view = render(<TouchableOpacity accessibilityHint="HINT" key="3" />);
+
+  expect(() => view.getByHintText('FOO')).toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityHint: FOO
+
+    <View
+      accessibilityHint="HINT"
+    />"
+  `);
+
+  expect(() => view.getAllByHintText('FOO'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityHint: FOO
+
+    <View
+      accessibilityHint="HINT"
+    />"
+  `);
+
+  await expect(view.findByHintText('FOO')).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityHint: FOO
+
+    <View
+      accessibilityHint="HINT"
+    />"
+  `);
+
+  await expect(view.findAllByHintText('FOO')).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityHint: FOO
+
+    <View
+      accessibilityHint="HINT"
+    />"
+  `);
+});