@testing-library/react-native 12.1.2 → 12.2.0

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

@@ -0,0 +1,242 @@
+import * as React from 'react';
+import { View, Text, TextInput, TouchableOpacity } from 'react-native';
+import { render } from '../..';
+
+const BUTTON_LABEL = 'cool button';
+const BUTTON_HINT = 'click this button';
+const TEXT_LABEL = 'cool text';
+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 accessibilityLabel: ${value}`;
+};
+
+const getNoInstancesFoundMessage = (value: string) => {
+  return `Unable to find an element with accessibilityLabel: ${value}`;
+};
+
+const Typography = ({ children, ...rest }: any) => {
+  return <Text {...rest}>{children}</Text>;
+};
+
+const Button = ({ children }: { children: React.ReactNode }) => (
+  <TouchableOpacity
+    accessibilityHint={BUTTON_HINT}
+    accessibilityLabel={BUTTON_LABEL}
+  >
+    <Typography accessibilityHint={TEXT_HINT} accessibilityLabel={TEXT_LABEL}>
+      {children}
+    </Typography>
+  </TouchableOpacity>
+);
+
+const Section = () => (
+  <>
+    <Typography accessibilityHint={TEXT_HINT} accessibilityLabel={TEXT_LABEL}>
+      Title
+    </Typography>
+    <Button>{TEXT_LABEL}</Button>
+  </>
+);
+
+test('getByLabelText, queryByLabelText, findByLabelText', async () => {
+  const { getByLabelText, queryByLabelText, findByLabelText } = render(
+    <Section />
+  );
+
+  expect(getByLabelText(BUTTON_LABEL).props.accessibilityLabel).toEqual(
+    BUTTON_LABEL
+  );
+  const button = queryByLabelText(/button/g);
+  expect(button?.props.accessibilityLabel).toEqual(BUTTON_LABEL);
+
+  expect(() => getByLabelText(NO_MATCHES_TEXT)).toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+  expect(queryByLabelText(NO_MATCHES_TEXT)).toBeNull();
+
+  expect(() => getByLabelText(TEXT_LABEL)).toThrow(
+    getMultipleInstancesFoundMessage(TEXT_LABEL)
+  );
+  expect(() => queryByLabelText(TEXT_LABEL)).toThrow(
+    getMultipleInstancesFoundMessage(TEXT_LABEL)
+  );
+
+  const asyncButton = await findByLabelText(BUTTON_LABEL);
+  expect(asyncButton.props.accessibilityLabel).toEqual(BUTTON_LABEL);
+  await expect(findByLabelText(NO_MATCHES_TEXT)).rejects.toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+
+  await expect(findByLabelText(TEXT_LABEL)).rejects.toThrow(
+    getMultipleInstancesFoundMessage(TEXT_LABEL)
+  );
+});
+
+test('getAllByLabelText, queryAllByLabelText, findAllByLabelText', async () => {
+  const { getAllByLabelText, queryAllByLabelText, findAllByLabelText } = render(
+    <Section />
+  );
+
+  expect(getAllByLabelText(TEXT_LABEL)).toHaveLength(2);
+  expect(queryAllByLabelText(/cool/g)).toHaveLength(3);
+
+  expect(() => getAllByLabelText(NO_MATCHES_TEXT)).toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+  expect(queryAllByLabelText(NO_MATCHES_TEXT)).toEqual([]);
+
+  await expect(findAllByLabelText(TEXT_LABEL)).resolves.toHaveLength(2);
+  await expect(findAllByLabelText(NO_MATCHES_TEXT)).rejects.toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+});
+
+test('getAllByLabelText, queryAllByLabelText, findAllByLabelText with exact as false', async () => {
+  const { getAllByLabelText, queryAllByLabelText, findAllByLabelText } = render(
+    <Section />
+  );
+
+  expect(getAllByLabelText(TEXT_LABEL, { exact: false })).toHaveLength(2);
+  expect(queryAllByLabelText(/cool/g, { exact: false })).toHaveLength(3);
+
+  expect(() => getAllByLabelText(NO_MATCHES_TEXT, { exact: false })).toThrow(
+    getNoInstancesFoundMessage(NO_MATCHES_TEXT)
+  );
+  expect(queryAllByLabelText(NO_MATCHES_TEXT, { exact: false })).toEqual([]);
+
+  await expect(
+    findAllByLabelText(TEXT_LABEL, { exact: false })
+  ).resolves.toHaveLength(2);
+  await expect(
+    findAllByLabelText(NO_MATCHES_TEXT, { exact: false })
+  ).rejects.toThrow(getNoInstancesFoundMessage(NO_MATCHES_TEXT));
+});
+
+describe('findBy options deprecations', () => {
+  let warnSpy: jest.SpyInstance;
+  beforeEach(() => {
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    warnSpy.mockRestore();
+  });
+
+  test('findByText queries warn on deprecated use of WaitForOptions', async () => {
+    const options = { timeout: 10 };
+    // mock implementation to avoid warning in the test suite
+    const view = render(<View />);
+    await expect(
+      view.findByLabelText('Some Text', options)
+    ).rejects.toBeTruthy();
+
+    setTimeout(
+      () => view.rerender(<View accessibilityLabel="Some Text" />),
+      20
+    );
+    await expect(view.findByLabelText('Some Text')).resolves.toBeTruthy();
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Use of option "timeout"')
+    );
+  }, 20000);
+});
+
+test('byLabelText queries support hidden option', () => {
+  const { getByLabelText, queryByLabelText } = render(
+    <Text accessibilityLabel="hidden" style={{ display: 'none' }}>
+      Hidden from accessibility
+    </Text>
+  );
+
+  expect(
+    getByLabelText('hidden', { includeHiddenElements: true })
+  ).toBeTruthy();
+
+  expect(queryByLabelText('hidden')).toBeFalsy();
+  expect(
+    queryByLabelText('hidden', { includeHiddenElements: false })
+  ).toBeFalsy();
+  expect(() => getByLabelText('hidden', { includeHiddenElements: false }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityLabel: hidden
+
+    <Text
+      accessibilityLabel="hidden"
+      style={
+        {
+          "display": "none",
+        }
+      }
+    >
+      Hidden from accessibility
+    </Text>"
+  `);
+});
+
+test('getByLabelText supports accessibilityLabelledBy', async () => {
+  const { getByLabelText, getByTestId } = render(
+    <>
+      <Text nativeID="label">Label for input</Text>
+      <TextInput testID="textInput" accessibilityLabelledBy="label" />
+    </>
+  );
+
+  expect(getByLabelText('Label for input')).toBe(getByTestId('textInput'));
+  expect(getByLabelText(/input/)).toBe(getByTestId('textInput'));
+});
+
+test('getByLabelText supports nested accessibilityLabelledBy', async () => {
+  const { getByLabelText, getByTestId } = render(
+    <>
+      <View nativeID="label">
+        <Text>Label for input</Text>
+      </View>
+      <TextInput testID="textInput" accessibilityLabelledBy="label" />
+    </>
+  );
+
+  expect(getByLabelText('Label for input')).toBe(getByTestId('textInput'));
+  expect(getByLabelText(/input/)).toBe(getByTestId('textInput'));
+});
+
+test('error message renders the element tree, preserving only helpful props', async () => {
+  const view = render(<TouchableOpacity accessibilityLabel="LABEL" key="3" />);
+
+  expect(() => view.getByLabelText('FOO')).toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityLabel: FOO
+
+    <View
+      accessibilityLabel="LABEL"
+    />"
+  `);
+
+  expect(() => view.getAllByLabelText('FOO'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityLabel: FOO
+
+    <View
+      accessibilityLabel="LABEL"
+    />"
+  `);
+
+  await expect(view.findByLabelText('FOO')).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityLabel: FOO
+
+    <View
+      accessibilityLabel="LABEL"
+    />"
+  `);
+
+  await expect(view.findAllByLabelText('FOO')).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with accessibilityLabel: FOO
+
+    <View
+      accessibilityLabel="LABEL"
+    />"
+  `);
+});

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

@@ -0,0 +1,235 @@
+import * as React from 'react';
+import { Text, TextInput, View } from 'react-native';
+import { render, screen } from '../..';
+
+describe('printing element tree', () => {
+  test('includes element tree on error with less-helpful props stripped', async () => {
+    const { getByText } = render(<Text onPress={() => null}>Some text</Text>);
+
+    expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <Text>
+        Some text
+      </Text>"
+    `);
+  });
+
+  test('prints helpful props but not others', async () => {
+    const { getByText } = render(
+      <View
+        accessibilityElementsHidden
+        accessibilityViewIsModal
+        importantForAccessibility="yes"
+        testID="TEST_ID"
+        nativeID="NATIVE_ID"
+        accessibilityLabel="LABEL"
+        accessibilityLabelledBy="LABELLED_BY"
+        accessibilityRole="summary"
+        accessibilityHint="HINT"
+        key="this is filtered"
+      >
+        <TextInput
+          placeholder="PLACEHOLDER"
+          value="VALUE"
+          defaultValue="DEFAULT_VALUE"
+        />
+        <Text>Some Text</Text>
+      </View>
+    );
+
+    expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <View
+        accessibilityElementsHidden={true}
+        accessibilityHint="HINT"
+        accessibilityLabel="LABEL"
+        accessibilityLabelledBy="LABELLED_BY"
+        accessibilityRole="summary"
+        accessibilityViewIsModal={true}
+        importantForAccessibility="yes"
+        nativeID="NATIVE_ID"
+        testID="TEST_ID"
+      >
+        <TextInput
+          defaultValue="DEFAULT_VALUE"
+          placeholder="PLACEHOLDER"
+          value="VALUE"
+        />
+        <Text>
+          Some Text
+        </Text>
+      </View>"
+    `);
+  });
+
+  test('prints tree and filters props with getBy, getAllBy, findBy, findAllBy', 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('only appends element tree on last failure with findBy', async () => {
+    const { findByText } = render(
+      <View accessibilityViewIsModal key="this is filtered" />
+    );
+
+    jest.spyOn(screen, 'toJSON');
+
+    await expect(findByText(/foo/)).rejects.toThrow();
+
+    expect(screen.toJSON).toHaveBeenCalledTimes(1);
+  });
+
+  test('onTimeout with findBy receives error without element tree', async () => {
+    const { findByText } = render(<View />);
+
+    const onTimeout = jest.fn((_: Error) => new Error('Replacement error'));
+
+    await expect(() =>
+      findByText(/foo/, undefined, { onTimeout })
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`"Replacement error"`);
+
+    expect(onTimeout).toHaveBeenCalledTimes(1);
+    expect(onTimeout.mock.calls[0][0].message).not.toMatch(/View/);
+    expect(onTimeout.mock.calls[0][0].message).toMatchInlineSnapshot(
+      `"Unable to find an element with text: /foo/"`
+    );
+  });
+
+  test('onTimeout with findAllBy receives error without element tree', async () => {
+    const { findAllByText } = render(<View />);
+
+    const onTimeout = jest.fn((_: Error) => new Error('Replacement error'));
+
+    await expect(() =>
+      findAllByText(/foo/, undefined, { onTimeout })
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`"Replacement error"`);
+
+    expect(onTimeout).toHaveBeenCalledTimes(1);
+    expect(onTimeout.mock.calls[0][0].message).not.toMatch(/View/);
+    expect(onTimeout.mock.calls[0][0].message).toMatchInlineSnapshot(
+      `"Unable to find an element with text: /foo/"`
+    );
+  });
+
+  test('does not strip display: none from "style" prop, but does strip other styles', () => {
+    const { getByText } = render(
+      <View style={{ display: 'flex', position: 'absolute' }}>
+        <Text
+          style={[
+            { display: 'flex', position: 'relative' },
+            { display: 'none', flex: 1 },
+          ]}
+        >
+          Some text
+        </Text>
+      </View>
+    );
+
+    expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <View>
+        <Text
+          style={
+            {
+              "display": "none",
+            }
+          }
+        >
+          Some text
+        </Text>
+      </View>"
+    `);
+  });
+
+  test('strips undefined values from accessibilityState', () => {
+    const { getByText } = render(
+      <View accessibilityState={{ checked: true, busy: false }}>
+        <View accessibilityState={{ checked: undefined }} />
+      </View>
+    );
+
+    expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <View
+        accessibilityState={
+          {
+            "busy": false,
+            "checked": true,
+          }
+        }
+      >
+        <View />
+      </View>"
+    `);
+  });
+
+  test('strips undefined values from accessibilityValue', () => {
+    const { getByText } = render(
+      <View accessibilityValue={{ min: 1 }}>
+        <View accessibilityState={{}} />
+      </View>
+    );
+
+    expect(() => getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(`
+      "Unable to find an element with text: /foo/
+
+      <View
+        accessibilityValue={
+          {
+            "min": 1,
+          }
+        }
+      >
+        <View />
+      </View>"
+    `);
+  });
+
+  test('does not render element tree when toJSON() returns null', () => {
+    const view = render(<View />);
+
+    jest.spyOn(screen, 'toJSON').mockImplementation(() => null);
+    expect(() => view.getByText(/foo/)).toThrowErrorMatchingInlineSnapshot(
+      `"Unable to find an element with text: /foo/"`
+    );
+  });
+});

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

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { View, TextInput } 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 Banana = () => (
+  <View>
+    <TextInput
+      testID="bananaCustomFreshness"
+      placeholder={PLACEHOLDER_FRESHNESS}
+      value={INPUT_FRESHNESS}
+    />
+    <TextInput
+      testID="bananaChef"
+      placeholder={PLACEHOLDER_CHEF}
+      value={INPUT_CHEF}
+      defaultValue={DEFAULT_INPUT_CHEF}
+    />
+  </View>
+);
+
+test('getByPlaceholderText, queryByPlaceholderText', () => {
+  const { getByPlaceholderText, queryByPlaceholderText } = render(<Banana />);
+  const input = getByPlaceholderText(/custom/i);
+
+  expect(input.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
+
+  const sameInput = getByPlaceholderText(PLACEHOLDER_FRESHNESS);
+
+  expect(sameInput.props.placeholder).toBe(PLACEHOLDER_FRESHNESS);
+  expect(() => getByPlaceholderText('no placeholder')).toThrow(
+    'Unable to find an element with placeholder: no placeholder'
+  );
+
+  expect(queryByPlaceholderText(/add/i)).toBe(input);
+  expect(queryByPlaceholderText('no placeholder')).toBeNull();
+  expect(() => queryByPlaceholderText(/fresh/)).toThrow(
+    'Found multiple elements with placeholder: /fresh/ '
+  );
+});
+
+test('getAllByPlaceholderText, queryAllByPlaceholderText', () => {
+  const { getAllByPlaceholderText, queryAllByPlaceholderText } = render(
+    <Banana />
+  );
+  const inputs = getAllByPlaceholderText(/fresh/i);
+
+  expect(inputs).toHaveLength(2);
+  expect(() => getAllByPlaceholderText('no placeholder')).toThrow(
+    'Unable to find an element with placeholder: no placeholder'
+  );
+
+  expect(queryAllByPlaceholderText(/fresh/i)).toEqual(inputs);
+  expect(queryAllByPlaceholderText('no placeholder')).toHaveLength(0);
+});
+
+test('byPlaceholderText queries support hidden option', () => {
+  const { getByPlaceholderText, queryByPlaceholderText } = render(
+    <TextInput placeholder="hidden" style={{ display: 'none' }} />
+  );
+
+  expect(
+    getByPlaceholderText('hidden', { includeHiddenElements: true })
+  ).toBeTruthy();
+
+  expect(queryByPlaceholderText('hidden')).toBeFalsy();
+  expect(
+    queryByPlaceholderText('hidden', { includeHiddenElements: false })
+  ).toBeFalsy();
+  expect(() => getByPlaceholderText('hidden', { includeHiddenElements: false }))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with placeholder: hidden
+
+    <TextInput
+      placeholder="hidden"
+      style={
+        {
+          "display": "none",
+        }
+      }
+    />"
+  `);
+});
+
+test('byPlaceHolderText should return host component', () => {
+  const { getByPlaceholderText } = render(
+    <TextInput placeholder="placeholder" />
+  );
+
+  expect(getByPlaceholderText('placeholder').type).toBe('TextInput');
+});
+
+test('error message renders the element tree, preserving only helpful props', async () => {
+  const view = render(<TextInput placeholder="PLACEHOLDER" key="3" />);
+
+  expect(() => view.getByPlaceholderText('FOO'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with placeholder: FOO
+
+    <TextInput
+      placeholder="PLACEHOLDER"
+    />"
+  `);
+
+  expect(() => view.getAllByPlaceholderText('FOO'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with placeholder: FOO
+
+    <TextInput
+      placeholder="PLACEHOLDER"
+    />"
+  `);
+
+  await expect(view.findByPlaceholderText('FOO')).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with placeholder: FOO
+
+    <TextInput
+      placeholder="PLACEHOLDER"
+    />"
+  `);
+
+  await expect(view.findAllByPlaceholderText('FOO')).rejects
+    .toThrowErrorMatchingInlineSnapshot(`
+    "Unable to find an element with placeholder: FOO
+
+    <TextInput
+      placeholder="PLACEHOLDER"
+    />"
+  `);
+});