callstack / callstack/react-native-bottom-tabs
`tabBarButtonTestID` is not available in the rendered react test hierarchy
- 主要言語
- TypeScript
- スター
- 1.5k
- フォーク
- 109
- 平均マージ
- 11時間 44分
- マージ済み PR(30日)
- 8
説明
### 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
```
コントリビューションガイド
調査の方向性
まず、リンクされた NativeTabsTesting の再現手順を `yarn run test` で実行し、レンダリングされた `RNCTabView` 階層を調べます。React Navigation のオプションにある `tabBarButtonTestID` が bottom-tabs ライブラリでどのように処理されるかを追跡します。サンプルアプリの React Native Testing Library 階層に設定されたテスト ID が表示されれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile-dev, testing-qa
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100