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

React Native Typescript testing with Jest

$
0
0

I faced a problem with writing the jest test for a react-native app. The app uses typescript. I am new to typescript and cannot figure out how to pass navigation props to component. I have followed examples and tutorials but had no success.Error message, component code and test code are as follows:

Error message:

__tests__/Signin.test.tsx:30:42 - error TS2322: Type '{ state: { params: {}; }; dispatch: jest.Mock<any, any>; goBack: jest.Mock<any, any>; dismiss: jest.Mock<any, any>; navigate: () => void; openDrawer: jest.Mock<any, any>; ... 15 more ...; setOptions: (options: '') => any; }' is not assignable to type 'MainNavigationProp<MainRoutes.Signin>'.  Type '{ state: { params: {}; }; dispatch: jest.Mock<any, any>; goBack: jest.Mock<any, any>; dismiss: jest.Mock<any, any>; navigate: () => void; openDrawer: jest.Mock<any, any>; ... 15 more ...; setOptions: (options: '') => any; }' is not assignable to type '{ setParams(params: undefined): void; setOptions(options: Partial<StackNavigationOptions>): void; }'.    Types of property 'setOptions' are incompatible.      Type '(options: '') => any' is not assignable to type '(options: Partial<StackNavigationOptions>) => void'.        Types of parameters 'options' and 'options' are incompatible.          Type 'Partial<StackNavigationOptions>' is not assignable to type '""'.30     const tree = renderer.create(<Signin navigation={store} />).toJSON()                                            ~~~~~~~~~~  app/ui/screens/Signin.tsx:14:5    14     navigation: MainNavigationProp<MainRoutes.Signin>           ~~~~~~~~~~    The expected type comes from property 'navigation' which is declared here on type 'IntrinsicAttributes & SigninProps'__tests__/Signin.test.tsx:29:5 - error TS1005: '=>' expected.29     }       ~

My component:

import { MainNavigationProp } from "../../navigation/types"import { MainRoutes } from "../../navigation/routes"type SigninProps = {    navigation: MainNavigationProp<MainRoutes.Signin>}export default function Signin({ navigation }: SigninProps) {    return (<View><TouchableOpacity                onPress={() => {                    navigation.navigate(MainRoutes.ForgotPassword)                }}><Text>GO TO "ForgotPassword"</Text></TouchableOpacity><TouchableOpacity                 onPress={() => {                    navigation.navigate(MainRoutes.Signup)                }}><Text>GO TO "Signup"</Text></TouchableOpacity></View>    )}

Test code:

import React from "react"import renderer from "react-test-renderer"import Signin from "../app/ui/screens/Signin"test("render correctly", () => {    const store = {        state: { params: {} },        dispatch: jest.fn(),        goBack: jest.fn(),        dismiss: jest.fn(),        navigate: ()=>{},        openDrawer: jest.fn(),        closeDrawer: jest.fn(),          toggleDrawer: jest.fn(),        getParam: jest.fn(),        setParams: jest.fn(),        addListener: jest.fn(),        push: jest.fn(),        replace: jest.fn(),        pop: jest.fn(),        popToTop: jest.fn(),        isFocused: jest.fn(),        reset: jest.fn(),        canGoBack: jest.fn(),        getParent: jest.fn(),        getState: jest.fn(),        removeListener: jest.fn(),           setOptions:(options: '')         }    const tree = renderer.create(<Signin navigation={store} />).toJSON()    expect(tree).toMatchInlineSnapshot()})

Thanks in advance


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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