Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Type Safety for Testing React Navigation with React Native

$
0
0

NAVIGATOR

export type RootStackNavigator = {   Welcome: undefined   List: undefined}const Stack = createStackNavigator<RootStackNavigator>()const { Navigator, Screen } = Stackconst Navigation = () => {   return (<NavigationContainer><Navigator initialRouteName={'Welcome'} headerMode="none"><Screen name="Welcome" component={Welcome} /><Screen name="List" component={List} /></Navigator></NavigationContainer>   )}

WELCOME SCREEN

interface WelcomeProps {   navigation: StackNavigationProp<RootStackNavigator, 'Welcome'>}const Welcome = ({ navigation }: WelcomeProps) => {   return (<Screen style={styles.screen}><TouchableWithoutFeedback onPress={() => navigation.navigate('List')} testID="touchable" style={styles.touchable}>            etc ...</TouchableWithoutFeedback></Screen>   )}

TEST

describe('Welcome Screen', () => {   it('Navigates to List Screen when clicked', () => {      const navigate = jest.fn()      const { getByTestId } = render(<Welcome navigation={{ navigate }} />)      fireEvent.press(getByTestId('touchable'))      expect(navigate).toBeCalledWith('List')   })})

With all of this, I am getting this error from typescript:

Type '{ navigate: jest.Mock<any, any>; }' is not assignable to type 'StackNavigationProp<RootStackNavigator, "Welcome">'.

How can I solve this?

I am trying to test if I click in the screen the app renders the List Screen component.

Thank you.

PS: btw, the test is passing


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>