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;