GetByTestId Not Finding Testid

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')
4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Sarah Jenkins

Sarah Jenkins

Senior Technology Editor & AI Specialist

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.

Share this article
Twitter Facebook Pinterest