Typescript and React Navigation app won't render (TypeError: Cannot read properties of undefined (reading 'current')) #1061
Description
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!