mercredi 28 octobre 2020

How To Unit Test a Popover In React Native

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