Typescript and React Navigation app won't render (TypeError: Cannot read properties of undefined (reading 'current'))

Ask your Question

I have the following test where I’m trying to render my login screen.

// __tests__/App.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react-native';
import AppNavigator from '../src/screens';

jest.mock('../node_modules/react-native-spotify-remote', () => ({
  authorize: jest.fn(),
}));

it('Login Screen renders', async () => {
  render(<AppNavigator />);

  const loginText = await screen.findByText('a smol bean app');
  const loginButton = await screen.findAllByText(/Login/);

  expect(loginText).toBeTruthy();
  expect(loginButton.length).toBe(1);
});


// AppNavigator component /screens/index.ts
import React, { useMemo, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Provider as PaperProvider } from 'react-native-paper';
import { RootStackParamList } from '../types';
import DetailsScreen from './Details/Details';
import { DETAILS, LOGIN } from './constants/Screens';
import LoginScreen from './Login';

import {
  initialState,
  SpotifyAuthContext,
  SpotifyAuthentication,
} from '../context';

const Stack = createNativeStackNavigator<RootStackParamList>();

function ScreenIndex() {
  const [spotifyAuth, setSpotifyAuth] =
    useState<SpotifyAuthentication>(initialState);

  const authState = useMemo<SpotifyAuthContext>(
    () => [spotifyAuth, setSpotifyAuth],
    [spotifyAuth, setSpotifyAuth],
  );
  return (
    <SpotifyAuthContext.Provider value={authState}>
      <PaperProvider>
        <NavigationContainer>
          <Stack.Navigator initialRouteName={LOGIN}>
            <Stack.Screen
              options={{
                headerShown: false,
              }}
              name={LOGIN}
              component={LoginScreen}
            />
            <Stack.Screen name={DETAILS} component={DetailsScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      </PaperProvider>
    </SpotifyAuthContext.Provider>
  );
}

export default ScreenIndex;

But every time I run the tests I end up getting this error.

I’ve tried it with a super basic component as well (A View and Text component) and I still get the same error. I’ve read around here that there’s something up when using TS and imports, does this seem like it’s related? Thanks!

[mdjastrzebski]

I’ve added the root cause/fix for this issue to our Troubleshooting guide: https://callstack.github.io/react-native-testing-library/docs/troubleshooting#matching-react-native-react--react-test-renderer-versions

[Danondso]

@karlmarxlopez Think I got it figured out, upgrade your devDependency of ‘react-test-renderer’ to match your version of react. I got it working on your repo, I guess the bump from 17 to 18 is causing the issue, shame it’s manifesting so vaguely.