Can't press top tab in jest test: material-top-tabs "TypeError: Cannot read properties of undefined (reading 'Commands')"

[Stewartarmbrecht]

Current behavior

I have the following code:

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';


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

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

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <SafeAreaView style={{flex: 1}}>
        <Tab.Navigator style={{flex: 1}}>
          <Tab.Screen name="Home" component={HomeScreen} options={{
            tabBarTestID: 'HomeTab'
          }} />
          <Tab.Screen name="Settings" component={SettingsScreen} options={{
            tabBarTestID: 'SettingsTab'
          }} />
        </Tab.Navigator>
      </SafeAreaView>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

and I run the following test:

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

describe('Activity Entries Screen', () => {
  
  describe('With an existing activity', () => {
    it('should display the list of entries', async () => {
      let app = render(<App />);
      const button = await app.findByTestId('SettingsTab')
      await fireEvent.press(button);
      const screen = await app.findByTestId("SettingsScreen");
      await within(screen).findByText('Settings');
    });

  })
    
});

I get the following error:

 FAIL  ./index.test.tsx
  Activity Entries Screen
    With an existing activity
      ✕ should display the list of entries (300 ms)

  ● Activity Entries Screen › With an existing activity › should display the list of entries

    TypeError: Cannot read properties of undefined (reading 'Commands')

       9 |       let app = render(<App />);
      10 |       const button = await app.findByTestId('SettingsTab')
    > 11 |       await fireEvent.press(button);
         |                       ^
      12 |       const screen = await app.findByTestId("SettingsScreen");
      13 |       await within(screen).findByText('Settings');
      14 |     });

      at PagerView.setPage (node_modules/react-native-pager-view/lib/commonjs/PagerView.tsx:98:7)
      at Object.jumpTo (node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.tsx:66:23)
      at onPress (node_modules/react-native-tab-view/lib/commonjs/TabBar.tsx:433:30)
      at node_modules/@testing-library/react-native/build/fireEvent.js:86:19
      at batchedUpdates (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13452:12)
      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15280:14)
      at invokeEvent (node_modules/@testing-library/react-native/build/fireEvent.js:85:20)
      at Function.press (node_modules/@testing-library/react-native/build/fireEvent.js:93:44)
      at _callee$ (index.test.tsx:11:23)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.853 s, estimated 2 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior

The test passes.

To recreate just run the test in the top-tab-only folder of the repro.

yarn test

Reproduction

https://github.com/Stewartarmbrecht/material-top-tabs-error-repro

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

• [@react-navigation/bottom-tabs
  @react-navigation/drawer
  @react-navigation/material-bottom-tabs
  @react-navigation/stack]
  I've removed the packages that I don't use.

The repo has a docker file as well to recreate the exact environment if needed.

package	version
@react-navigation/native	6.0.8
@react-navigation/material-top-tabs	6.1.1
react-native-safe-area-context	3.3.2
react-native-screens	3.10.1
react-native-tab-view	3.1.1
react-native-pager-view	5.4.9
react-native	0.64.3
expo	44.0.0
node	16.14.0
npm or yarn	1.22.17

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[rsov]

Having same issue with material-top-tabs and clicking on tabs to navigate in Jest

[Aure77]

same issue.
seems to be related to react-native-pager-view
callstack/react-native-pager-view#481

[louiechristie]

Having the same issue with @react-navigation/material-bottom-tabs (version 5.3.15)

[gilons]

Having the same issue with react-native @react-navigation/bottom-tabs@^6.5.2

[david-pixkie]

please did you get the solution to this problem?

[david-pixkie]

Having the same issue with react-native @react-navigation/bottom-tabs@^6.5.2

did you find the solution to this

[MarcHbb]

Any solutions on this ? The only solution I've found (for bottom-bar) is to create a custom tab and add testID on my <TouchableOpacity> component

[Stewartarmbrecht]

I did not find a solution. I built my own top-level tabs using buttons to get around this. Not great but at least testable.