I am using react navigation props name RouteProp
in my app. My app works fine without Typescript
error. I am trying to test my component, does it render the data properly. In my test suite I import the components and when I trying to send the props I am getting typescript error:
Type '{ key: string; name: Routes; params: { product:Partial; }; }' is not assignable to type'ProductDetailsScreenRouteProp'. Type '{ key: string; name: Routes;params: { product: Partial; }; }' is not assignable to type'Readonly<{ key: string; name: Routes.ProductDetails; }>'.Types of property 'name' are incompatible.Type 'Routes' is not assignable to type 'Routes.ProductDetails'.ts(2322) product_details_screen.tsx(43, 3):The expected type comes from property 'route' which is declared hereon type 'IntrinsicAttributes & Props'
I really don't what I am doing wrong.
PS: My test pass. I want to rid of this typescript error
This is my component
import { RouteProp } from '@react-navigation/native'; type ProductDetailsScreenRouteProp = RouteProp< RootStackParamList, Routes.ProductDetails>; interface Props { route: ProductDetailsScreenRouteProp; } const ProductDetailsScreen = (props: Props) => { const { product } = props.route.params; ..... }
This is the test suite I am getting typescript error
import React from 'react';import { render, cleanup } from '@testing-library/react-native';import ProductDetailsScreen from './screens/productscreen';import MockedNavigator from './mocked_navigator';import { mockData } from './data.ts';import Routes from 'navigations/routes';const route = { key: 'key', name: Routes.ProductDetails, params: { product: mockData, // fake data object },};describe('<ProductDetailsScreen/>', () => { afterEach(cleanup); test('render valid data', () => { const component = (<MockedNavigator screen={() => <ProductDetailsScreen route={route} />} /> // This route giving me the error ); const { getByTestId } = render(component); const headerText = getByTestId('product_title'); expect(headerText).toBeDefined(); });});