在 Typescript React 本机项目中对 DrawerNavigator 的开玩笑测试失败

Question

我是 React Native 和 Typescript 的新手。我一直在实现一个带有堆栈导航和抽屉导航的小项目。该项目运行良好，但现在我必须进行一些单元测试。我从一个非常简单的开始，但失败了：/

这是用于应用程序导航的代码：

Navigator.tsx

import App from "../../App";
import React from 'react';
import { Image, StyleSheet, TouchableHighlight } from 'react-native';
import { createAppContainer, NavigationScreenProp, NavigationState, NavigationParams } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from "./LoginScreen";
import RegisterScreen from "./RegisterScreen";
import MapScreen from "./MapScreen";
import BikesScreen from "./BikesScreen";
import TheftScreen from "./TheftScreen";
import RentBikeScreen from "./RentBikeScreen";
import RouteListScreen from "./RouteListScreen";
import CouponScreen from "./CouponScreen";
import strings from "../config/strings";
interface Props {
navigation: NavigationScreenProp<NavigationState,NavigationParams>;
}
interface State {}
export default class NavigatorContainer extends React.Component<Props, State> {  
render() {
const DrawerStack = 
createDrawerNavigator({     
Map: MapScreen,      
Bikes: BikesScreen,  
Theft: TheftScreen,
RouteList: RouteListScreen,
Coupon: CouponScreen   
})

DrawerStack.navigationOptions = ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
const headerTitle = 
routeName == "Map" ? strings.CONSULT_ROUTE : 
routeName == "Bikes" ? strings.BIKES_TITLE : 
routeName == "Theft" ? strings.THEFT_REPORT_TITLE :
routeName == "Register" ? strings.REGISTER_SCREEN_TITLE :
routeName == "RouteList" ? strings.ROUTE_LIST_TITLE :
routeName == "Coupon" ? strings.COUPON_TITLE : "";
return {
headerTitle,
headerLeft: ({ tintColor }: {tintColor: any}) => (
<TouchableHighlight onPress={() => navigation.toggleDrawer()}><Image
source={require('../assets/images/drawer.png')}
style={[styles.icon, { tintColor: tintColor }]}        
/></TouchableHighlight>)
};
};
const AppNavigator = createStackNavigator(
{        
Login: {
screen: LoginScreen,
navigationOptions: {
header: null 
}      
},   
Register: {
screen: RegisterScreen    
},      
DrawerStack: DrawerStack
},
{
initialRouteName: 'Login',
}
);
const AppContainer = createAppContainer(AppNavigator);
return <AppContainer />;   
}
}
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
});

这是测试：

App-test.tsx

/**
* @format
*/
import 'react-native';
import React from 'react';
import App from '../App';
import * as renderer from 'react-test-renderer';
jest.mock('react-native', () => {
return { 
StyleSheet: {
create: () => {
}
},
Platform: {}
}
});
it('renders correctly', () => {
renderer.create(<App />);
});

使用"纱线测试"执行测试时，我得到这个：

src/screens/Navigator.tsx:50:38 - error TS7031: Binding element 'navigation' implicitly has an 'any' type

所以我将"导航">

改为"导航：导航屏幕道具"：

DrawerStack.navigationOptions = (navigation : NavigationScreenProp<NavigationState,NavigationParams>) => {....

测试通过...但是现在当我尝试使用"this.props.navigation.navigate('Map'("转到抽屉导航器的一个屏幕时，例如MapScreen，我收到错误：

TypeError: undefined is not an object (evaluating 'navigation.state.routes')

我看到问题出在这一行：

const { routeName } = navigation.state.routes[navigation.state.index];

但我不知道如何解决它，也不明白为什么它仅适用于"({ 导航}(">

有什么想法吗？

Answer 1

这是一个sintax问题，我改变了这个：

DrawerStack.navigationOptions = ({ navigation }) => {

有了这个：

DrawerStack.navigationOptions = ({navigation} : { navigation : NavigationScreenProp<NavigationState,NavigationParams>}) => {