Unexpected element not found when adding accessibilityElementsHidden or importantForAccessibility

[berseck]

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",
"@testing-library/jest-native": "5.4.3",
"@testing-library/react-native": "12.4.3",
"@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.

Feels like this was a feature introduced on: #970
But right now I have no way to test ADA elements that should be tested as well.

Any ways to proceed and still be able to test my elements?
Since I'm supposed to test if the elements with ADA are correct and are rendering all the data.

[wilsolutions]

Interesting, I was about to post this, I've the same issue...

[berseck]

So for the testing I actually need to add: { includeHiddenElements: true } as option for the getters in order to make this work!

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', { includeHiddenElements: true })).toBeTruthy();
});

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

  expect(getByTestId('View', { includeHiddenElements: true })).toBeTruthy();
});

That will do the trick

[mdjastrzebski]

@berseck. @wilsolutions You seem to figure out the issue yourself. ❤️

From my side I can add that we are not matching the hidden elements as they would not be "seen" by the user. However, we also provide the includeHiddenElements option as a way to avoid that.