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!
