Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Jest + @testing-library/react-native Error: ReferenceError: You are trying to `import` a file after the Jest environment has been torn down

$
0
0

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;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>