Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#400 2 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react-native, typescript
Domínio
mobile-dev, testing-qa

Direção de pesquisa

Comece executando a reprodução vinculada do NativeTabsTesting com yarn run test e inspecione a hierarquia RNCTabView renderizada. Rastreie como tabBarButtonTestID das opções do React Navigation é tratado na biblioteca bottom-tabs. A tarefa estará concluída quando os IDs de teste configurados aparecerem na hierarquia do React Native Testing Library do aplicativo de exemplo.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

bug
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
Linguagem predominante
TypeScript
Estrelas
1.5k
Forks
110
Merge médio
2d 18h
PRs com merge (30d)
2

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-bottom-tabs

Todas as issues de callstack/react-native-bottom-tabs

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.