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

Viewed 2467

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;
1 Answers

Was able to solve it using this mock in jest setup:

jest.mock('@react-navigation/native/lib/commonjs/useLinking.native', () => ({
  default: () => ({getInitialState: {then: jest.fn()}}),
  __esModule: true,
}));

source here: github

Related