Unexpected element not found when adding accessibilityElementsHidden or importantForAccessibility

[Thiago de Oliveira Cruz]

Hello guys,

description of problem

Until versions

"react-native": "0.70.15",
"@testing-library/jest-native": "5.4.1",
"@testing-library/react-native": "11.5.0",
"@types/react-test-renderer": "18.0.0",
"react-test-renderer": "18.2.0",

I was able to do the following:

import { render } from '@testing-library/react-native';
import { Text, View } from 'react-native';

const MyComponent = () => {
  return (
    <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" testID="View">
      <Text>Hello World</Text>
    </View>
  );
};

it('Can Render component and get text', () => {
  const { getByText } = render(<MyComponent />);

  expect(getByText('Hello World')).toBeTruthy();
});

it('Can Render component and getByTestId', () => {
  const { getByTestId } = render(<MyComponent />);

  expect(getByTestId('View')).toBeTruthy();
});

This test was a success.

But since this versions:
"react-native": "0.72.10",
"@react-native/eslint-config": "0.72.2",
"@react-native/metro-config": "0.72.11",
"@types/react-test-renderer": "18.0.0",
"react-test-renderer": "18.2.0",

I get this:

 FAIL  src/ui/test.tsx
  ✕ Can Render component and get text (54 ms)
  ✕ Can Render component and getByTestId (12 ms)

  ● Can Render component and get text

    Unable to find an element with text: Hello World

    <View
      accessibilityElementsHidden={true}
      importantForAccessibility="no-hide-descendants"
      testID="View"
    >
      <Text>
        Hello World
      </Text>
    </View>

      13 |   const { getByText } = render(<MyComponent />);
      14 |
    > 15 |   expect(getByText('Hello World')).toBeTruthy();
         |          ^
      16 | });
      17 |
      18 | it('Can Render component and getByTestId', () => {

      at Object.getByText (src/ui/test.tsx:15:10)

  ● Can Render component and getByTestId

    Unable to find an element with testID: View

    <View
      accessibilityElementsHidden={true}
      importantForAccessibility="no-hide-descendants"
      testID="View"
    >
      <Text>
        Hello World
      </Text>
    </View>

      19 |   const { getByTestId } = render(<MyComponent />);
      20 |
    > 21 |   expect(getByTestId('View')).toBeTruthy();
         |          ^
      22 | });
      23 |

      at Object.getByTestId (src/ui/test.tsx:21:10)

Not sure if this is expected behaviour or not. Since We are supposed to be able to still see the elements and test what is inside them. Or else I can't even test properly ADA to make sure the properties are set correctly.

Because even if I try to find the view instead of the text I can't find any.
If this is expected is there any new ways to actually make sure the content exists for non ADA users and ADA users at the same time?

Because right now I cannot know if my elements are all correct or not.

[Matan Borenkraout]

I think you're looking for https://github.com/callstack/react-native-testing-library, this is @testing-library/react :)

[Thiago de Oliveira Cruz]

Oopps! Thanks