`tabBarButtonTestID` is not available in the rendered react test hierarchy

[itsramiel]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

I am trying to test my app that native bottom tabs. I am looking for a way to interact with bottom tabs in my tests and I found the tabBarButtonTestID.

I tried to use it but the rendered react hierarchy with @testing-library/react-native does not show it. For the following app:

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';

const Tab = createNativeBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarButtonTestID: 'home-tab-button',
          }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarButtonTestID: 'settings-tab-button',
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

and the following test:

import { render, screen } from '@testing-library/react-native';
import App from './App';

test('App', () => {
  render(<App />);

  screen.debug();
});

I get:

  ● <RNCTabView>
      <View
        accessibilityElementsHidden={false}
        importantForAccessibility="auto"
        pointerEvents="auto"
      >
        <View>
          <Text>
            Home!
          </Text>
        </View>
      </View>
      <View />
    </RNCTabView>

I can't see any of the tabBarButtonTestID there

Library version

0.10.0

Environment info

info Fetching system and libraries information...
System:
  OS: macOS 15.6
  CPU: (14) arm64 Apple M3 Max
  Memory: 1.03 GB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: ~/.nvm/versions/node/v22.14.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v22.14.0/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.14.0/bin/npm
  Watchman:
    version: 2025.04.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/itsramiel/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13363775
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.4.3
    path: /Users/itsramiel/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.0
    wanted: 0.81.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

1. Clone Repo
2. run tests with yarn run test
3. Notice that the test ids are not available

Reproducible sample code

https://github.com/itsramiel/NativeTabsTesting

[jikseyres16]

Getting the same problem. Anyone got idea? I'm trying to dive deeper into this.

[gustavo-aily]

Hello!

We're having a similar issue! We're defining the Screens based on a global page, selected by the user. In page 1, the bottom bar is rendered with 4 tabs and in page 2, the bottom bar is rendered with 3 tabs.

By setting the screen options with the following

options={{
   ...
   tabBarLabel: "",
   tabBarButtonTestID: "test-id-bottom-tab-button"
   ...
}}

The test ids are displayed on the current page only when the code is reloaded. If the user either change from Page or close/open the application, the test id is lost.

We've checked with Appium and also with xCode Accessibility Inspector and in both cases the result was exactly the same