`*ByRole` queries with name option does not find elements based on text content in v14

[kovbe21]

Describe the bug

Repro repository: https://github.com/kovbe21/jest-reproductions

Using expo v55

According to the documents here (https://oss.callstack.com/react-native-testing-library/docs/api/queries#by-role-options), the name option search for the accessibility label or text content.

In v13, text content was working fine, but in v14, it does not anymore. Accessibility label based query-ing works though.

When query-ing with *getByRole like screen.getByRole('button', { name: 'rn-button-title'}), tests fail with error:

Unable to find an element with role: button, name: rn-button-title

    <View
      accessibilityLabel="rn-button-accessibility-label"
      accessibilityRole="button"
      accessible={true}
    >
      <View>
        <Text>
          rn-button-title
        </Text>
      </View>
    </View>

Expected behavior

When query-ing with *getByRole like screen.getByRole('button', { name: 'rn-button-title'}), tests should find the queried element.

Steps to Reproduce

In this example repository you can find the reproduction: https://github.com/kovbe21/jest-reproductions

But it is east to reproduce with a basic test:

  test('getByRole query succeeds when accessibility label is queried in the name param for RN Button', async () => {
    await render(<Button title="rn-button-title" accessibilityLabel="rn-button-accessibility-label"/>);

    simpleScreen.getByRole('button', { name: 'rn-button-title'});
  });

or

  test('getByRole query fails when text content is queried in the name param', async () => {
    await render(<TouchableOpacity accessibilityRole="button" accessibilityLabel="opacity-accessibility-label"><Text>opacity-text</Text></TouchableOpacity>);

    simpleScreen.getByRole('button', { name: 'opacity-text'});
  });

Versions

npmPackages:
@testing-library/react-native: ^14.0.1 => 14.0.1
react: 19.2.0 => 19.2.0
react-native: 0.83.6 => 0.83.6
test-renderer: ^1.2.0 => 1.2.0

[mdjastrzebski]

@kovbe21 in RNTL 14 the way of calculating accessible name has been aligned with Web/React Testing Library. It now uses the name that screen reader would use: if given view has accessibility label it takes preference over text content when both are present. Only if there is no a11y label then text content is taken into consideration.

[kovbe21]

Hi @mdjastrzebski!

I see. Its a pity, we will need to adjust our tests since accessibility label is not the same as text content, but understandable.

Could you please update the docs so that it clearly state that when both is used, a11y label is searched for?

[mdjastrzebski]

Docs updated in #1927