`tabBarButtonTestID` is not available in the rendered react test hierarchy
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react-native, typescript
- 领域
- mobile-dev, testing-qa
调研方向
首先使用 yarn run test 运行链接的 NativeTabsTesting 复现，并检查渲染后的 RNCTabView 层级结构。跟踪 React Navigation 选项中的 tabBarButtonTestID 在 bottom-tabs 库中是如何处理的。当配置的测试 ID 出现在示例应用的 React Native Testing Library 层级结构中时，即表示完成。
由索引模型根据 Issue 内容生成。
描述
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
- Clone Repo
- run tests with
yarn run test - Notice that the test ids are not available
Reproducible sample code
https://github.com/itsramiel/NativeTabsTesting
- 主要语言
- TypeScript
- 星标
- 1.5k
- 派生
- 110
- 平均合并
- 2 天 18 小时
- 30 天内合并 PR
- 2
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
callstack/react-native-bottom-tabs 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 75/100
-
[iOS] Fabric: SIGABRT on tab press when tab key contains non-ASCII characters (kCFStringEncodingUTF8 passed to -cStringUsingEncoding:)可能已有人在做 @thiagobrez 于 50 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 75/100
-
bug
难度 3/5 1-2 天 新手友好度 72/100
-
难度 4/5 3-5 天 新手友好度 48/100
-
难度 4/5 3-5 天 新手友好度 68/100
callstack/react-native-bottom-tabs#591 · 1 条评论 ·
查看 callstack/react-native-bottom-tabs 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
needs triage
难度 2/5 1-3 小时 新手友好度 76/100
homarr-labs/homarr#7191 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 74/100
AvaProtocol/ava-sdk-js#276 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 75/100
apollographql/apollo-client#13493 ·
维护者通常 1 天内回复