Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/callstack/react-native-testing-library/issues/1061 below:

Typescript and React Navigation app won't render (TypeError: Cannot read properties of undefined (reading 'current')) · Issue #1061 · callstack/react-native-testing-library · GitHub

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!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4