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