Test if Child components exist and render correctly inside Parent component in react native

I’m trying to test a Parent component that contains three child components

my parent component look like this:

<SafeAreaView
        testID="welcome-screen"
        edges={['left', 'right', 'top']}
        style={[styles(colors).container]}>
        <StatusBar barStyle={'light-content'} backgroundColor={'black'} />
        <Animatable.View
            animation={isAnimationsFinish ? upTopBar : absoluteScreen}>
            <ShowInitialUserDetails />
        </Animatable.View>
        <View style={styles(colors).scroll_and_button}>
            <ScrollView
                contentContainerStyle={styles(colors).userDetailsContainer}>
                <RegularTextStyle color={colors.SOFT_BLACK} size={14}>
                    To proceed, Please fill up the following fields.
                </RegularTextStyle>
                <Animatable.View
                    animation={upUserDetailsScreen}
                    style={styles(colors).userDetailsViewContainer}>
                    {}
                    <TitleAndTextInput
                        title="Your phone number"
                        placeHolder="Phone number"
                        inputType=""
                    />
                </Animatable.View>
            </ScrollView>
            <SimpleButton
                title="Continue"
                isVisible={isAnimationsFinish ? true : false}
                onPress={() => resetTo(HOME_NAVIGATOR)}
            />
        </View>
    </SafeAreaView>

and my test file look like this:

import { render, waitFor } from '@testing-library/react-native';
import { Provider } from 'react-redux';
import store from '../../../state/store';
import React from 'react';
import WelcomeScreen from '../WelcomeScreen';
import RegularTextStyle from '../../../components/texts/RegularTextStyle';
import { View } from 'react-native';
import TitleAndTextInput from '../../../components/TitleAndTextInput';
import ShowInitialUserDetails from '../components/ShowInitialUserDetailsComponent';
import * as Animatable from 'react-native-animatable';
import { shallow } from 'enzyme';
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({ adapter: new Adapter() });

jest.mock('react-native-animatable', () => {
   const ReactRef = jest.requireActual('react');
   return {
       // ...actual,
       View: class extends ReactRef.Component {
           render() {
               return <></>;
           }
       },
   };
});

jest.mock('../../../components/texts/RegularTextStyle', () =>
   jest.fn().mockReturnValue(null),
);
jest.mock('../../../components/TitleAndTextInput', () =>
   jest.fn().mockReturnValue(null),
);
jest.mock('../components/ShowInitialUserDetailsComponent', () =>
   jest.fn().mockReturnValue(null),
);

describe('Welcome Screen test', () => {
   //TEST NUMBER 1 -WORKING
   it('Should render currectly', async () => {
       const { getByTestId } = render(
           <Provider store={store}>
               <WelcomeScreen />
           </Provider>,
       );
       await waitFor(() => {
           const welcomeContainer = getByTestId('welcome-screen');
           expect(welcomeContainer).toBeDefined();
       });
   });
    //TEST NUMBER 2 - WORKING
   it('should render RegularTextStyle currectly ', () => {
       (RegularTextStyle as jest.Mock).mockReturnValue(
           <View testID="mock-regular-textStyle" />,
       );

       const { getByTestId } = render(
           <Provider store={store}>
               <WelcomeScreen />
           </Provider>,
       );
       getByTestId('mock-regular-textStyle');
   });

    //TEST NUMBER 3 -  NOT WORKING!
   it('should render TitleAndTextInput  currectly ', async () => {
       (TitleAndTextInput as jest.Mock).mockReturnValue(
           <Animatable.View testID="test" />,
       );
       const { getByTestId } = render(
           <Provider store={store}>
               <WelcomeScreen />
           </Provider>,
       );
       getByTestId('test');
   });

    //TEST NUMBER 4 -  NOT WORKING!
   it('should render ShowInitialUserDetails currectly', () => {
   const wrapper = shallow(
       <Provider store={store}>
           <WelcomeScreen />
       </Provider>,
   );
   expect(wrapper.find(<ShowInitialUserDetails />)).toHaveLength(1);
});

as you can see test number 1 and 2 working fine
but test number 3 that look the same as test number 2 exepct that he is insdie Animated.View, throw Error:

    Unable to find an element with testID: test

For test number 4 I received this error when I used the Enzyme library

expect(received).toHaveLength(expected)

Expected length: 1
Received length: 0
Received object: {}

Could someone please tell me what I am doing wrong with this test or how I should test my child component?
thanks!