航海家
export type RootStackNavigator = {
Welcome: undefined
List: undefined
}
const Stack = createStackNavigator<RootStackNavigator>()
const { Navigator, Screen } = Stack
const Navigation = () => {
return (
<NavigationContainer>
<Navigator initialRouteName={'Welcome'} headerMode="none">
<Screen name="Welcome" component={Welcome} />
<Screen name="List" component={List} />
</Navigator>
</NavigationContainer>
)
}
欢迎画面
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>
)
}
测试
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')
})
})
有了这一切,我从打字稿中得到了这个错误:
Type '{ navigate: jest.Mock<any, any>; }' is not assignable to type 'StackNavigationProp<RootStackNavigator, "Welcome">'.
我该如何解决这个问题?
我正在尝试测试是否在应用程序呈现列表屏幕组件的屏幕中单击。
谢谢你。
PS:顺便说一句,测试通过