Jest test error

[Andrii Boiko]

Bug report

Hi! When I try to write the test - I get the error

Summary

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 `Schedule`.

Environment info

react-native info output:

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 321.80 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-R | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_231 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 2.1.0

Steps to reproduce

Just write a simple test

describe('Schedule screen', () => {
  test('Page must render correctly', () => {
    const { findByText, findByPlaceholder, debug, findByTestId } = render(
      <Schedule  navigation={navigation}/>
    );
  });
});

Reproducible sample code

const Schedule: React.FC<ISchedule> = ({ navigation }) => {
  const _onChangeSegmentControl = (
    event: NativeSyntheticEvent<NativeSegmentedControlIOSChangeEvent>,
  ) => {
    dispatch({
      type: ACTION_TYPES.SET_SELECTED_INDEX,
      payload: event.nativeEvent.selectedSegmentIndex,
    });
  };

  return (
    <SafeAreaView testID="Schedule.SafeAreaView" style={styles.container}>
      <SegmentedControl
        style={headerStyle.segmentContainer}
        fontStyle={headerStyle.segmentText}
        activeFontStyle={headerStyle.segmentActiveText}
        values={[
          t('for_days_segment_title'),
          t('week_segment_title'),
          t('month_segment_title'),
        ]}
        selectedIndex={state.selectedIndex}
        onChange={_onChangeSegmentControl}
      />
    </SafeAreaView>
  );
};

export default Schedule;

[Andrii Boiko]

Any updates?

[Andrii Boiko]

Are there any updates?

[Alexander Burdiss]

How are you importing your Schedule component into the test file? Since you're default exporting your component, you have to import it without brackets:

import Schedule from './Schedule';

You may be importing your component incorrectly:

import { Schedule } from './Schedule' (This won't work since you're default exporting the component)

Check the MDN docs if you need a more in-depth explanation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Hopefully this helps!