Skip to content

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

Closed
@Danondso

Description

@Danondso

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.
image

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requested

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions