I'm trying to test whether a popover functionality however I'm running into "cannot spy property". The popover I'm trying to test is in the class UserIcon.js which when pressed, displays a popover. I haven't seen any documentation or questions similar which is why I'm posting. Here's what I'm trying to do:
Test.js
test('Popup Render When User Icon Button is Clicked', () => {
jest.spyOn(App, 'headerRight');
const {getByTestId} = render(<App/>);
fireEvent.press(getByTestId('usericon'));
expect(App.headerRight).toHaveBeenCalledTimes(1);
});
App.js
<Stack.Navigator
testID = "usericon"
initialRouteName={SPLASH_SCREEN}
headerMode={'screen'}
screenOptions={({navigation}) => ({
headerStyle: {
borderBottomLeftRadius: 20,
backgroundColor: 'white',
borderBottomRightRadius: 20,
shadowRadius: 7,
},
headerBackTitleVisible: false,
headerRight: () => <UserIcon navigation={navigation} />,
})}>
UserIcon.js
export default UserIcon = (props) => {
const [{user, data}, dispatch] = useStateValue();
const navigation = props.navigation;
logoutBtnPress = () => {
userLogout(dispatch);
navigation.reset({index: 0, routes: [{name: LOGIN_SCREEN}]});
};
return (
<PopoverController>
{({
openPopover,
closePopover,
popoverVisible,
setPopoverAnchor,
popoverAnchorRect,
}) => (
<View>
<TouchableOpacity
ref={setPopoverAnchor}
onPress={() => openPopover()}>
<IconButton icon="account-box-outline" color={'gray'} />
</TouchableOpacity>
<Popover
visible={popoverVisible}
onClose={closePopover}
<DataTable>
<DataTable.Row>
<DataTable.Cell
onPress={() => {
closePopover();
navigation.navigate(HISTORY_SCREEN);
}}>
<Button icon="history">
<Text>History</Text>
</Button>
</DataTable.Cell>
</DataTable.Row>
<DataTable.Row>
<DataTable.Cell
onPress={() => {
Alert.alert(
'Log out?',
'Are you really sure to log out?',
[
{
text: 'Cancel',
onPress: () => closePopover(),
style: 'cancel',
},
{
text: 'OK',
onPress: () => {
closePopover();
logoutBtnPress();
},
},
],
{cancelable: false},
);
}}>
<Button icon="logout">
<Text>Log Out</Text>
</Button>
</DataTable.Cell>
</DataTable.Row>
</DataTable>
</Popover>
</View>
)}
</PopoverController>
);
};
Aucun commentaire:
Enregistrer un commentaire