Facing the <Icon> issue/warning while executing a SNAPSHOT TEST for 'App.tsx' for our EXPO CLI project which leading to fail ci pipelines. Happens in case when assigned a dynamic path to <TextInput.Icon>

Expo Development Tools
1

Hi Team,

I am facing the following issue while executed a SNAPSHOT TEST for ‘App.tsx’ for our react native project. Where the test passes with the below-mentioned errors.

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.

console.error
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 `Icon`.
    at Icon (<projectRoot>\node_modules\@expo\vector-icons\build\vendor\react-native-vector-icons\lib\create-icon-set.js:70:36)        at Icon (D:\Projects\MEEL\app-native-consumer\node_modules\@expo\vector-icons\build\createIconSet.js:65:36)
    at Icon (<projectRoot>\node_modules\react-native-paper\lib\commonjs\components\Icon.js:117:21)
    at ThemedComponent (<projectRoot>\node_modules\@callstack\react-theme-provider\src\createWithTheme.js:21:31)
    at View
    at View (<projectRoot>\node_modules\react-native\jest\mockComponent.js:35:36)
    at Avatar.Icon (<projectRoot>\node_modules\react-native-paper\lib\commonjs\components\Avatar\AvatarIcon.js:103:19)
    at ThemedComponent (<projectRoot>\node_modules\@callstack\react-theme-provider\src\createWithTheme.js:21:31)
    at View
    at View (<projectRoot>\node_modules\react-native\jest\mockComponent.js:35:36)
    at Success (<projectRoot>\scenes\Success\index.tsx:207:25)

  at printWarning (node_modules/react/cjs/react.development.js:315:30)
  at error (node_modules/react/cjs/react.development.js:287:5)
  at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)
  at Icon.render (node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js:120:31)
  at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)

console.error
The above error occurred in the component:

    at Icon (<projectRoot>\node_modules\@expo\vector-icons\build\vendor\react-native-vector-icons\lib\create-icon-set.js:70:36)        at Icon (D:\Projects\MEEL\app-native-consumer\node_modules\@expo\vector-icons\build\createIconSet.js:65:36)
    at Icon (<projectRoot>\node_modules\react-native-paper\lib\commonjs\components\Icon.js:117:21)
    at ThemedComponent (<projectRoot>\node_modules\@callstack\react-theme-provider\src\createWithTheme.js:21:31)
    at View
    at View (<projectRoot>\node_modules\react-native\jest\mockComponent.js:35:36)
    at Avatar.Icon (<projectRoot>\node_modules\react-native-paper\lib\commonjs\components\Avatar\AvatarIcon.js:103:19)
    at ThemedComponent (<projectRoot>\node_modules\@callstack\react-theme-provider\src\createWithTheme.js:21:31)
    at View
    at View (<projectRoot>\node_modules\react-native\jest\mockComponent.js:35:36)
    at Success (<projectRoot>\scenes\Success\index.tsx:207:25)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

_**NOTE**_: I have replaced our project root details with '<projectRoot>'

CURRENTLY - The mentioned error/warning popping always when the snapshot tests are executed where the snapshot tests pass but due to warnings, the pipeline fails and thus blocks the build.

CODE BLOCK:
From file 1:

<Avatar.Icon style={{ backgroundColor: “#00C33F” }} color={“#FFFFFF”} icon=“check” />

From file 2:

<TextInput
mode={“flat”}
style={styles.inputStyle}
underlineColor={errors.email ? colors.underline : colors.accent}
theme={{ fonts: { regular: fonts.medium }, colors: errors.email ? { placeholder: colors.textRed } : { text: colors.textBlack } }}
label=“E-mail”
left={<TextInput.Icon name=“email-outline” color={colors.accent} />}
onBlur={onBlur}
value={value}
onChangeText={text => onChange(text)}
keyboardType={“email-address”}
returnKeyType={“done”}
blurOnSubmit={true}
onSubmitEditing={handleSubmit(onSendCode)}
/>

When commented on the mentioned line/s or code above it stops throwing the mentioned error.

Requests to suggest a fix.

Versions for the packages used:
“react-native”: “https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz”,
“react-native-paper” - “^4.8.1”,
“react-native-vector-icons” - “^8.1.0”
“npm” - “6.14.7”

Please find the sample code at GitHub - nitinthiteITWOX/VectorIconTest at master for the error.
Steps to reproduce the error:

  1. Clone the project on local
  2. execute ‘npm i’
  3. execute ‘npm test’