mockConstructor(...): Nothing was returned from render while testing Tab Navigator

Viewed 102

I am trying to test my bottomTabNavigator and have followed the instructions here : https://callstack.github.io/react-native-testing-library/docs/react-navigation but I am getting this error

mockConstructor(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

This is my test file

import { NavigationContainer } from '@react-navigation/native';
import { render } from '@testing-library/react-native';
import { RootStack } from '../index';
jest.mock('@react-native-masked-view/masked-view', () => ({
  MaskedView: jest.fn(),
}));
jest.mock('@react-navigation/native', () => ({
  createBottomTabNavigator: jest.fn(),
  createStackNavigator: jest.fn(),
  CardStyleInterpolators: jest.fn(),
  useNavigation: jest.fn(),
  useScrollToTop: jest.fn(),
  useLinkTo: jest.fn(),
  NavigationContainer: jest.fn(),
}));
jest.mock('@invertase/react-native-apple-authentication', () => ({
  appleAuth: jest.fn(),
}));
jest.mock('react-native-maps', () => ({
  MapView: jest.fn(),
}));
jest.mock('react-native-pdf', () => ({
  Pdf: jest.fn(),
}));
describe('Testing react navigation', () => {
  test('screen contains a button linking to the notifications page', async () => {
    const component = (
      <NavigationContainer>
        <RootStack />
      </NavigationContainer>
    );
    const result = render(component);
    console.log('this is the result', result);
  });
});

Versions:

"@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "react-native": "0.66.4",

1 Answers

inside jest.mock function when i read the page it seem that you have to return something , the return instruction is missing

import defaultExport, {bar, foo} from '../foo-bar-baz';

jest.mock('../foo-bar-baz', () => {
  const originalModule = jest.requireActual('../foo-bar-baz');

  //Simule l'exportation par défaut et l'exportation nommée 'foo'
  return {
    __esModule: true,
    ...originalModule,
    default: jest.fn(() => 'mocked baz'),
    foo: 'mocked foo',
  };
});

https://jestjs.io/fr/docs/mock-functions

Related