How to test called function with jest and react native

Question

I have one parent component (Login Screen), one child component (Button Social Media) and one global component (Button Full). I want to test when use click or press button login with facebook, the function for that button is executed or not. But it always throw

Expected number of calls: >= 1
Received number of calls:    0

This is my Login Screen (index.js)

import React, { useState, useEffect } from 'react'
import { ScrollView, StatusBar, Platform } from 'react-native'
import ButtonSocialMedia from './components/ButtonSocialMedia'
const LoginScreen = (props) => {
  const showAppleButton = () => {
    if (Platform.OS === 'ios') {
      const version = Platform.Version ? Platform.Version.split('.')[0] : 0
      if (version >= 13) {
        return true
      } else {
        return false
      }
    } else {
      return false
    }
  }

  const loginWithApple = () => {
    console.log('Login With apple')
  }

  const loginWithGoogle = () => {
    console.log('Login with google')
  }

  const loginWithFacebook = () => {
    console.log('Login with facebook')
  }

  return (
    <ButtonSocialMedia
      showAppleButton={showAppleButton()}
      loginWithApple={loginWithApple()}
      loginWithGoogle={loginWithGoogle()}
      loginWithFacebook={loginWithFacebook()} />
  )
}

export default LoginScreen

This is my child component (Button Social Media)

import React from 'react'
import { View, Text, Linking } from 'react-native'
import styles from '../styles/StyleButtonSocialMedia'
import color from '../../../../__global__/styles/themes/colorThemes'
import ButtonFull from '../../../../__global__/button/buttonFull'
function ButtonSocialMedia(props) {

  const renderButtonApple = () => {
    if (props.showAppleButton) {
      return (
        <View style={styles.containerButton}>
          <ButtonFull
            accessibilityLabel={'appleButton'}
            isDisabled={false}
            buttonColor={color.black}
            onPress={() => props.loginWithApple}
            title={'Apple ID'}
          />
        </View>
      )
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.textSocialMedia}>Or you can use</Text>
      <View style={styles.containerButton}>
        <ButtonFull
          isDisabled={false}
          accessibilityLabel={'googleButton'}
          buttonColor={color.thema}
          title={'Google'}
          onPress={() => props.loginWithGoogle}
        />
      </View>
      <View style={styles.containerButton}>
        <ButtonFull
          isDisabled={false}
          accessibilityLabel={'facebookButton'}
          buttonColor={color.blue}
          title={'Facebook'}
          onPress={() => props.loginWithFacebook}
        />
      </View>
      {renderButtonApple()}
      <View style={styles.containerTos}>
        <Text style={styles.textSocialMedia}>By continuing, I agree to the </Text>
        <Text
          onPress={() => Linking.openURL('https://halojasa.com/bantuan/syarat-umum/')}
          style={styles.textTos}>Terms Of Services </Text>
        <Text style={styles.textSocialMedia}>and </Text>
        <Text
          onPress={() => Linking.openURL('https://halojasa.com/bantuan/privacy/')}
          style={styles.textTos}>Privacy Policy</Text>
      </View>
    </View>
  )
}

export default ButtonSocialMedia

This is my global component (Button Full)

import React from 'react'
import { Text, TouchableOpacity } from 'react-native'
import color from '../styles/themes/colorThemes'
import font from '../styles/themes/fontThemes'
import {
  responsiveHeight,
  responsiveWidth,
  responsiveFontSize,
} from 'react-native-responsive-dimensions'
const ButtonFull = ({ isDisabled, buttonColor, onPress, title, accessibilityLabel }) => {
  return (
    <TouchableOpacity
      disabled={isDisabled}
      accessibilityLabel={accessibilityLabel}
      style={{
        backgroundColor: buttonColor,
        paddingHorizontal: responsiveWidth(8.3),
        paddingVertical: responsiveHeight(2.2),
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        width: '100%',
      }}
      onPress={onPress}>
      <Text style={{
        color: color.white,
        fontSize: responsiveFontSize(2),
        fontFamily: font.bold,
      }}>{title}</Text>
    </TouchableOpacity>
  )
}

export default ButtonFull

And this is my test file

import React from 'react'
import { configure, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import LoginScreen from '../index'
import renderer from 'react-test-renderer'
import { fireEvent, render, waitFor } from 'react-native-testing-library'
import '@testing-library/jest-native/extend-expect'

jest.mock('@react-navigation/native', () => ({
  useNavigation: component => component,
}))

describe('Login', () => {
  configure({ adapter: new Adapter() })
  const wrapper = shallow(<LoginScreen />)
  const rendered = renderer.create(<LoginScreen />)

  it('renders correctly', () => {
    expect(rendered.toJSON()).toBeTruthy()
  })

  it('login with google', async () => {
    const loginWithGoogle = jest.fn()
    const { getByA11yLabel } = render(<LoginScreen loginWithGoogle={loginWithGoogle} />)
    fireEvent.press(getByA11yLabel('googleButton'))
    expect(loginWithGoogle).toHaveBeenCalled()
  })

  it('login with facebook', async () => {
    const loginWithFacebook = jest.fn(() => {
      console.log('Login with facebook')
    })
    const { getByA11yLabel } = render(<LoginScreen />)
    fireEvent.press(getByA11yLabel('facebookButton'))
    expect(loginWithFacebook).toHaveBeenCalled()
  })
})