GetByLabel and aria-labelledby

[Clement-Hue]

Describe the bug

When I use aria-labelledby and getByLabel (or name property of getByRole), the test doesn't work. I also tried to use regex for the label. However I have no problem if I use aria-label

Expected behavior

The test should pass

Steps to Reproduce

Here is the component:

const Switch: React.FC<SwitchProps> = ({checked, onPress, title, ...props}) => {
  const theme = useTheme();
  const id = useId();
  return (
    <View style={switchStyle.container}>
      <BaseSwitch
        thumbColor={
          checked ? theme.color.primary['50'] : theme.color.grey['50']
        }
        trackColor={{
          true: theme.color.primary['30'],
          false: theme.color.grey['30'],
        }}
        value={checked}
        onValueChange={onPress}
        aria-labelledby={id}
        {...props}
      />
      {!!title && (
        <Text nativeID={id} style={switchStyle.title} variant="label">
          {title}
        </Text>
      )}
    </View>
  );
};

Here is the test

  it('should render Switch with label', () => {
    render(<Switch title="activate" />);
    expect(screen.getByRole('switch', {name: 'activate'})).toBeOnTheScreen();
  });

Screenshots

Here the result of the test

Versions

react: 18.2.0 react-native: 0.73.3 react-test-renderer: 18.2.0 @testing-library/react-native: 12.4.3

[mdjastrzebski]

@Clement-Hue Thanks for reporting this. I've done some checks with our codebase and theoretically this should work fine as we support aria-labelledby and have tests for that.

With what I know so far this problem could be located either in RNTL itself on some edge-case, your component or tests itself. Could you post a minimal reproduction repository so that I can run this locally?

[mdjastrzebski]

Closing as stale.