callstack / callstack/react-native-bottom-tabs

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

Open
#400 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
1.5k
Forks
109
Avg merge
11h 44m
Merged PRs (30d)
8

Description

### Before submitting a new issue

- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] 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](https://callstackincubator.github.io/react-native-bottom-tabs/docs/guides/usage-with-react-navigation.html#tabbarbuttontestid).

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

```tsx
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 (

Home!

);
}

function SettingsScreen() {
return (

Settings!

);
}

export default function App() {
return (






);
}
```

and the following test:
```tsx
import { render, screen } from '@testing-library/react-native';
import App from './App';

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

screen.debug();
});
```

I get:
```




Home!





```

I can't see any of the `tabBarButtonTestID` there

### Library version

0.10.0

### Environment info

```shell
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

```js
https://github.com/itsramiel/NativeTabsTesting
```

Contributor guide

Open the contributing guide

Research direction

Start by running the linked NativeTabsTesting reproduction with `yarn run test` and inspect the rendered `RNCTabView` hierarchy. Trace how `tabBarButtonTestID` from the React Navigation options is handled in the bottom-tabs library. Done means the configured test IDs appear in the React Native Testing Library hierarchy for the sample app.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile-dev, testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.