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: Dependencies
import React from 'react';
import renderer from 'react-test-renderer';
import { cleanup } from '@testing-library/react-native';
// Imports: Components
import Input from '../Input';
// React Native Testing Library: Cleanup (Unmounts Component And Destroys Container)
afterEach(cleanup);
// Tests: Input
describe('Input', () => {
// Renders Component
it('renders component', () => {
renderer.create(<Input placeholder="Placeholder" value="Value" onChangeText={() => console.log('Hi')} />);
});
});
Input.tsx:
// Imports: Dependencies
import React, { useEffect, useState, useRef } from 'react';
import { Dimensions, StyleSheet, Text, TextInput, View } from 'react-native';
// Imports: Styles
import { defaultStyles } from '../../styles/styles';
// Imports: TypeScript Types
import { IInputProps } from '../../types/inputTypes';
// Screen Dimensions
const { width } = Dimensions.get('window');
// Component: Input
const 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>
);
};
// Styles
const 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',
},
});
// Exports
export default Input;