Configuring react-native-screens with jest

I’m trying to test navigation in my react-native app with jest and I keep getting errors. If I attempt to mock the enableScreens function in my setup file like so;

jest.mock('react-native-screens', () => {
  const RealComponent = jest.requireActual('react-native-screens');
  RealComponent.enableScreens = jest.fn();
  return RealComponent;
});

then I get the following error when I run the tests:

Testing Root stack › should navigate to home page on guest login

Native stack is only available if React Native Screens is enabled.

  at NativeStackNavigator (node_modules/react-native-screens/lib/commonjs/native-stack/navigators/createNativeStackNavigator.tsx:28:11)
  at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6156:18)
  at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8690:13)
  at beginWork$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10052:16)
  at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14694:12)
  at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14667:22)
  at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14366:11)
  at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2063:24
  at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:818:12)
  at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)

If however I don’t mock the enable screens function then I get this error:

Screen native module hasn’t been linked. Please check the react-native-screens README for more details

  30 | import {Platform, UIManager} from 'react-native';
  31 | import {PlayButtonProvider} from './src/service/PlayButtonService';
> 32 | enableScreens();
     | ^
  33 | 
  34 | export type RootStackParamList = {
  35 |   AuthStack: NavigatorScreenParams<AuthStackParamList>;

  at registerError (node_modules/react-native/Libraries/LogBox/LogBox.js:148:9)
  at errorImpl (node_modules/react-native/Libraries/LogBox/LogBox.js:59:22)
  at console [as error] (node_modules/react-native/Libraries/LogBox/LogBox.js:33:14)
  at enableScreens (node_modules/react-native-screens/lib/commonjs/index.native.js:16:5)
  at Object.<anonymous> (App.tsx:32:1)

Any help would be greatly appreciated, thanks!

[SMJ93]

We managed to get our tests working by creating a createNativeStackNavigator helper which would use the react-native-screens native implementation and then create a mock which would use the react-navigations JS implementation:

// src/navigation/createNativeStackNavigator.tsx
import { createNativeStackNavigator } from "react-native-screens/native-stack";

export default createNativeStackNavigator;

// src/navigation/__mocks__/createNativeStackNavigator.tsx
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

const createNativeStackNavigator = () => {
  const Stack = createStackNavigator();

  return {
    ...Stack,
    Navigator: (props: any) => (
      <Stack.Navigator {...props} headerMode="none" screenOptions={{ animationEnabled: false }} />
    )
  };
};

export default createNativeStackNavigator;

// jest.setup.js
jest.mock("src/navigation/createNativeStackNavigator");

Then anywhere you want to use createNativeStackNavigator a native stack import from your helper instead of react-native-screens/native-stack.

Keep in mind the createStackNavigator and createNativeStackNavigator APIs are different which could break some tests.

[jkadamczyk]

@DTX-Elliot there’s one more thing. Would you mind sending us a minimal repro? Maybe we can try looking at this anyway.