As I mentioned in some of my prior posts, I am new to testing React Native apps. I am trying to test this function that checks if a person is over 21 years old. I am experiment with the React Native testing to see where I should test components, so currently I put them on two elements arbitrarily. However, when I go to get the element by testID, it says that that the testID cannot be found. Below is where I have them currently/initially -- I moved them around to other locations and was yielding the same response. The test scripts are below:
import '../../../matchMedia.mock';
import React from 'react';
import renderer, { act } from 'react-test-renderer';
import VerificationScreen from '../VerificationScreen';
import { RecoilRoot } from 'recoil';
import { render, fireEvent, screen } from '@testing-library/react-native'
import ReactDOM from 'react-dom';
const mockNavigation = { navigate: jest.fn(), addListener: jest.fn()
}
test('renders correctly', () => { const tree = renderer.create(<RecoilRoot><VerificationScreen navigation= {mockNavigation}/></RecoilRoot>).toJSON(); expect(tree).toMatchSnapshot();
});
test('renders default elements', () => { const { getAllByText } = render(<RecoilRoot><VerificationScreen navigation= {mockNavigation}/></RecoilRoot>); expect(getAllByText('Can I see some ID?').length).toBe(1); expect(getAllByText('You must be of legal drinking age to use this app.').length).toBe(1); expect(getAllByText('Enter Now').length).toBe(1);
});
test('display error if the user is not 21', () => { const { getAllByText } = render(<RecoilRoot><VerificationScreen navigation= {mockNavigation}/></RecoilRoot>); console.log(getAllByText('MMDDYYYY')); fireEvent.changeText(queryByTestId('Verification.DOB'), '10012021'); fireEvent.press(getByTestId('Verification.Submit'));
})The component itself is below:
import React from 'react';
import moment from 'moment';
import { View, Text, StyleSheet, TouchableOpacity, TextInput } from 'react-native';
import { COLORS } from '../../styles/COLORS';
import { SHADOWS } from '../../styles/shadows';
import ClickableText from '../widgets/ClickableText';
import Logo from '../widgets/Logo';
import SlideInContainer from '../widgets/SlideInContainer';
import Spacing from '../widgets/Spacing';
import ErrorToast from '../widgets/ErrorToast';
import { handleError } from '../utils/ErrorFunctions';
import useDateOfBirth from './useDateOfBirth';
import setStatusBarColor from '../utils/StatusBarColorFunctions';
const VerificationScreen = ({ navigation }) => { const [error, setError] = React.useState(null); const [dateOfBirth, setDateOfBirth] = useDateOfBirth(); const [text, setText] = React.useState(dateOfBirth); const [inputFocused, setInputFocused] = React.useState(false); const [setColor] = setStatusBarColor(); const DATE_LENGTH = 8; const ref = React.useRef(null); const handleOnPress = () => { setInputFocused(true); ref.current.focus(); }; const handleOnBlur = () => { setInputFocused(false); }; const onSubmit = () => { // add validation if (text.length === DATE_LENGTH) { const MM = text.substring(0, 2); const DD = text.substring(2, 4); const YYYY = text.substring(4); const years = moment(new Date()) .diff(`${YYYY}-${MM}-${DD}`, 'years', false); if (years >= 21) { setDateOfBirth(text); navigation.navigate('Home'); } else { handleError('Error: You must be 21 to use this app', setError); } } else { handleError('Error: Please input a valid date', setError); } }; React.useEffect(() => { if (dateOfBirth !== '') { setText(dateOfBirth); } }, [dateOfBirth]); React.useEffect(() => { setColor(COLORS.red); },[]) return ( <View style={styles.container}> <View style={styles.alignment}> <TextInput ref={ref} value={text} onChangeText={setText} onBlur={handleOnBlur} keyboardType="number-pad" returnKeyType="done" textContentType="oneTimeCode" maxLength={DATE_LENGTH} style={styles.hidden} /> <SlideInContainer> <ErrorToast error={error} /> <Logo /> <Text style={styles.title}>Can I see some ID?</Text> <Text style={styles.subtitle}>You must be of legal drinking age to use this app.</Text> <TouchableOpacity style={styles.dateInputContainer} onPress={() => handleOnPress()} activeOpacity={1}> <Text style={styles.dateText} testID='Verification.DOB'> {'MMDDYYYY'.split('').map((val, i) => { let ret = ''; if (i < text.length) { ret = text.charAt(i); } else { ret = val; } if (i === 1 || i === 3) { ret += '/'; } return ret; })} </Text> </TouchableOpacity> <TouchableOpacity testID='Verification.Submit' onPress={() => onSubmit()} style={styles.buttonContainer}> <Text style={styles.buttonText}> Enter Now </Text> </TouchableOpacity> <Spacing vertical={10} /> <Text style={styles.legalText}>By entering this app you are agreeing to our <ClickableText text="Terms of Service" url="" /> and <ClickableText text="Privacy Policy" url="" /> </Text> </SlideInContainer> </View> <Text style={styles.disclaimerText}> You must be at least 21 years of age to drink alcoholic beverages. Do not drink and drive, drink to excess or drink with certain medications or medical conditions. For more information, please visit <ClickableText text="this website" url=""/> or contact your health provider. </Text> </View> )
}
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: COLORS.red, }, noteContainer: { position: 'absolute', bottom: 0, }, alignment: { flex: 0.65 }, hidden: { opacity: 0, }, title: { fontFamily: 'open-sans-semi', fontSize: 18, }, subtitle: { fontFamily: 'open-sans', textAlign: 'center', paddingHorizontal: 8, fontSize: 15, paddingTop: 8 }, dateInputContainer: { padding: 20 }, dateText: { fontSize: 30, fontFamily: 'open-sans', }, buttonContainer: { backgroundColor: COLORS.green, paddingVertical: 5, paddingHorizontal: 35, borderRadius: 5, ...SHADOWS.button, }, buttonText: { color: COLORS.white, fontSize: 18, fontFamily: 'open-sans-semi', }, legalText: { fontFamily: 'open-sans', paddingBottom: 20, paddingHorizontal: 8, fontSize: 12, textAlign: 'center' }, disclaimerText: { fontFamily: 'open-sans', fontSize: 12, position: 'absolute', bottom: 0, textAlign: 'center', justifyContent: 'center' }
})
export default VerificationScreen;If additional information is needed, please let me know. Thanks in advance!
1 Answer
You are gettinge rror becaue it cant' find TouchablOpacity. Try to mock it at the top like this-
jest.mock('TouchableOpacity', () => 'TouchableOpacity')
