I have a component InputAddressZipCode that is only used for 5 digit United States Zip Codes. I'm able to test onChangeText with react-test-renderer and @testing-library/react-native, but the test accepts any text such as a string ab. However, this input should only accept the following:
- 5 Digits (
maxLength={5}) - Numeric Keyboard (
keyboardType="numeric")
How can I test the following above props with React Native?
InputAddressZipCode.tsx:
// Imports: Dependenciesimport React, { useState } from 'react';import { TextInput } from 'react-native';// Imports: TypeScript Typesimport { IInputProps } from '../../types/inputTypes';// Component: Input (Address: Zip Code)const InputAddressZipCode = ({ placeholder, label, onChangeText, darkMode }: IInputProps): JSX.Element => { // React Hooks: State const [value, setValue] = useState<string>(''); // On Change const onChange = (text: string): void => { // Formatted Text: Numbers Only const formattedText: string = text.replace(/[^0-9]/g, ''); // Set State setValue(formattedText); // Props: On Change Text onChangeText(formattedText); }; return (<Input value={value} placeholder={placeholder || 'Zip Code'} label={label ? label : 'Zip Code'} keyboardType="numeric" onChangeText={onChange} autoCompleteType="postal-code" // Android Only dataDetectorTypes="address" // iOS Only textContentType="postalCode" // iOS Only maxLength={5} darkMode={darkMode || false} /> );};// Exportsexport default InputAddressZipCode;InputAddressZipCode.test.tsx:
// Imports: Dependenciesimport React from 'react';import renderer from 'react-test-renderer';import { cleanup, render, fireEvent } from '@testing-library/react-native';// Imports: Componentsimport InputAddressZipCode from '../InputAddressZipCode';// Jest: Fake Timers (Replaces setTimeout, setInterval, clearTimeout, clearInterval Since They Depend On Real Time To Elapse)jest.useFakeTimers();// React Native Testing Library: Cleanup (Unmounts Component And Destroys Container)afterEach(cleanup);// Tests: Input (Address: Zip Code)describe('Input (Address: Zip Code)', () => { // Renders Component it('renders component', () => { renderer.create(<InputAddressZipCode placeholder="Placeholder" value="Value" onChangeText={() => null} darkMode={false} />); }); // Changes Text it('Changes Text', () => { const onChangeTextMock = jest.fn(); const { getByPlaceholderText } = render(<InputAddressZipCode placeholder="Placeholder" value="Value" onChangeText={onChangeTextMock} darkMode={false} />, ); fireEvent(getByPlaceholderText('Placeholder'), 'onChangeText', '92694'); expect(onChangeTextMock).toHaveBeenCalledWith('92694'); }); // Changes Text it('Changes Text (Numbers only)', () => { const onChangeTextMock = jest.fn(); const { getByPlaceholderText } = render(<InputAddressZipCode placeholder="Placeholder" value="Value" onChangeText={onChangeTextMock} darkMode={false} />, ); fireEvent(getByPlaceholderText('Placeholder'), 'onChangeText', 'ab'); expect(onChangeTextMock).toHaveBeenCalledWith(''); });});