Overview:
I made a custom input component in which I'll be able to add props and optional props when necessary, but running into an error (see below) when running npm run test. I'm using jest and @testing-library/react-native.
Error:
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Input`. at Input (/Users/jefflewis/Documents/Computer-Programming/Projects-Libraries/unsion/unison-ui-react-native/src/components/inputs/Input.tsx:24:20)What I've Tried:
- All of my other tests work, but the input test does not and I can't seem to pinpoint the error.
- I've tried removing certain props
Input.test.tsx:
// Imports: Dependenciesimport React from 'react';import renderer from 'react-test-renderer';import { cleanup } from '@testing-library/react-native';// Imports: Componentsimport Input from '../Input';// React Native Testing Library: Cleanup (Unmounts Component And Destroys Container)afterEach(cleanup);// Tests: Inputdescribe('Input', () => { // Renders Component it('renders component', () => { renderer.create(<Input placeholder="Placeholder" value="Value" onChangeText={() => console.log('Hi')} />); });});Input.tsx:
// Imports: Dependenciesimport React, { useEffect, useState, useRef } from 'react';import { Dimensions, StyleSheet, Text, TextInput, View } from 'react-native';// Imports: Stylesimport { defaultStyles } from '../../styles/styles';// Imports: TypeScript Typesimport { IInputProps } from '../../types/inputTypes';// Screen Dimensionsconst { width } = Dimensions.get('window');// Component: Inputconst Input: React.FC<IInputProps> = ({ value, onChangeText, placeholder, placeholderTextColor, label, darkMode, autoCapitalize, autoCompleteType, // Android Only autoCorrect, autoFocus, blurOnSubmit, caretHidden, clearButtonMode, // iOS Only clearTextOnFocus, // iOS Only dataDetectorTypes, // iOS Only defaultValue, editable, enablesReturnKeyAutomatically, // iOS Only keyboardType, maxLength, multiline, numberOfLines, // iOS Only onSubmitEditing, returnKeyType, secureTextEntry, spellCheck, // iOS Only textAlign, textContentType, // iOS Only // passwordRules, // iOS Only}): JSX.Element => { // React Hooks: State const [text, setText] = useState<string>(''); // React Hooks: Refs const textInputRef: React.RefObject<TextInput> = useRef(null); // React Hooks: Lifecycle Methods useEffect(() => { // Set State setText(value); }, [value]); // Render Label const renderLabel = (): JSX.Element | undefined => { // Check If Prop Exists if (label) { return <Text style={darkMode ? styles.labelTextDark : styles.labelTextLight}>{label}</Text>; } }; return (<View style={styles.container}><>{renderLabel()}</><TextInput ref={textInputRef} style={darkMode ? styles.inputTextDark : styles.inputTextLight} placeholder={placeholder} placeholderTextColor={placeholderTextColor ? defaultStyles.colorDarkLabelTertiary : defaultStyles.colorLightLabelTertiary} value={text} onChangeText={onChangeText} autoCapitalize={autoCapitalize || 'none'} autoCompleteType={autoCompleteType || 'off'} // Android Only autoCorrect={autoCorrect} autoFocus={autoFocus} blurOnSubmit={blurOnSubmit} caretHidden={caretHidden} clearButtonMode={clearButtonMode || 'never'} // iOS Only clearTextOnFocus={clearTextOnFocus} // iOS Only dataDetectorTypes={dataDetectorTypes || 'none'} // iOS Only defaultValue={defaultValue} editable={editable} enablesReturnKeyAutomatically={enablesReturnKeyAutomatically} // iOS Only keyboardAppearance={darkMode ? 'dark' : 'light'} // iOS Only keyboardType={keyboardType || 'default'} maxLength={maxLength || 1000} multiline={multiline} numberOfLines={numberOfLines || 1} // Android Only onSubmitEditing={onSubmitEditing} returnKeyType={returnKeyType || 'done'} secureTextEntry={secureTextEntry} spellCheck={spellCheck} // iOS Only textAlign={textAlign || 'left'} textContentType={textContentType || 'none'} // iOS Only /></View> );};// Stylesconst styles = StyleSheet.create({ container: { height: 'auto', width: width - defaultStyles.marginExtraLarge, marginBottom: defaultStyles.marginMedium, }, labelTextLight: { color: defaultStyles.colorDarkLabelSecondary, fontSize: defaultStyles.fontSizeFootnoteSmall, fontWeight: defaultStyles.fontWeightSemiBold, letterSpacing: defaultStyles.fontLetterSpacingFootnote, textTransform: 'uppercase', }, labelTextDark: { color: defaultStyles.colorLightLabelSecondary, fontSize: defaultStyles.fontSizeFootnoteSmall, fontWeight: defaultStyles.fontWeightSemiBold, letterSpacing: defaultStyles.fontLetterSpacingFootnote, textTransform: 'uppercase', }, inputTextLight: { height: 40, fontSize: defaultStyles.fontSizeSubheading, color: defaultStyles.colorLightLabel, borderColor: defaultStyles.colorLightBorder, borderBottomWidth: StyleSheet.hairlineWidth, // textOverflow: 'ellipsis', }, inputTextDark: { height: 40, fontSize: defaultStyles.fontSizeSubheading, color: defaultStyles.colorDarkLabel, borderColor: defaultStyles.colorDarkBorder, borderBottomWidth: StyleSheet.hairlineWidth, // textOverflow: 'ellipsis', },});// Exportsexport default Input;