Icon component is not working with jest

[bibekluitel]

Icon component is breaking while running with jest.

#package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "native-base": "^2.12.1",
    "react": "16.8.3",
    "react-native": "0.59.3"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/runtime": "^7.4.3",
    "babel-jest": "^24.7.1",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!native-base)/"
    ]
  }
}

node: v11.13.0, npm : 6.7.0, react-native

Expected behaviour

Test should have rendered it properly.

Actual behaviour

It breaks throwing error

> [email protected] test /Users/bibek/Desktop/testnative/AwesomeProject
> jest

 FAIL  __tests__/App-test.js
  ✕ renders correctly (56ms)

  ● renders correctly

    TypeError: Cannot read property 'default' of undefined

      at new Icon (node_modules/react-native-vector-icons/lib/create-icon-set.js:42:389)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3435:22)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6606:9)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7563:20)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:16)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:28)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11349:11)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12237:11)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12149:11)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12123:7)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9036
    The above error occurred in the <Icon> component:
        in Icon (at IconNB.js:88)
        in IconNB (at connectStyle.js:384)
        in Styled(IconNB) (at Icon/index.js:67)
        in Icon (at connectStyle.js:384)
        in Styled(Icon) (at App.js:28)
        in View (created by View)
        in View (at App.js:24)
        in App (at App-test.js:13)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.109s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Steps to reproduce

Initilaize a new project with

react-native init AwesomeProject
npm install native-base --save

Add

 "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!native-base)/"
    ]

into jest of package.json

npm install

Add Icon component into App.js

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Icon name="close" type="MaterialIcons" style={{ color: '#000' }} />
      </View>
    );
  }
}

npm run test

Is the bug present in both iOS and Android or in any one of them?

N/A

Any other additional info which would help us debug the issue quicker.

[SupriyaKalghatgi]

I tried running jest test case for Icon
Worked fine

[SupriyaKalghatgi]

[edwardmsmith]

@bibekluitel I'm having this exact same issue. I've tried mocking Platform as per the above, but this still doesn't work.

Were you able to resolve this?

[bibekluitel]

@edwardmsmith i was able to resolve it after mocking a icon component.

import React from 'react';
import 'react-native';

import * as  NativeComp from 'native-base';


NativeComp.Icon = jest.fn((props) => 'Icon');

Try mocking all components which breaks Jest.

[nuKs]

See my comment in react-native-vector-icons for other fix.

oblador/react-native-vector-icons#1046 (comment)

cf.

Edit: even better -- https://stackoverflow.com/a/56817282/939741

-- Previous answer.

seems to be a problem with jest and the test renderer: facebook/react-native#22437

According to facebook/react-native#23326 (comment), the right fix is to add the constructor changing jest breaks other tests.

One liners:

sed -i -- 's/class Icon extends PureComponent {/class Icon extends PureComponent {constructor(props) { super(props) }/g' node_modules/react-native-vector-icons/lib/create-icon-set.js

# In case you use native based
sed -i -- 's/class Icon extends PureComponent {/class Icon extends PureComponent {constructor(props) { super(props) }/g' node_modules/native-base/node_modules/react-native-vector-icons/lib/create-icon-set.js

Good to use as a postinstall script in your package.json for both yarn and npm (w/ native-base lib fix also, adapt if you dont use it).

"postinstall": "sed -i -- 's/class Icon extends PureComponent {/class Icon extends PureComponent {constructor(props) { super(props) }/g' node_modules/react-native-vector-icons/lib/create-icon-set.js; sed -i -- 's/class Icon extends PureComponent {/class Icon extends PureComponent {constructor(props) { super(props) }/g' node_modules/react-native-vector-icons/lib/create-icon-set.js; # see https://github.com/oblador/react-native-vector-icons/issues/1046#issuecomment-546112745",

[FDiskas]

I ended by this solution

jest.mock('native-base/dist/src/basic/Icon', () => jest.genMockFromModule('native-base/dist/src/basic/Icon'));

[AsmaGulbazSlalom]

Having a similar problem where Calendar dates (using MUI calendar icons) are not correctly accessible on an Ubuntu agent. The tests run fine on a local machine but the fields cannot be accessed on the agent in a consistent manner.

Any solution here?