Cannot read property 'default' of undefined while testing application with jest

Question

I am not able to test my component that uses native-base Icon. It is throwing Cannot read property 'default' of undefined.

The above error occurred in the <Icon> component:
  in Icon (at IconNB.js:80)
  in IconNB (at connectStyle.js:384)
  in Styled(IconNB) (at Icon/index.js:67)
  in Icon (at connectStyle.js:384)
  in Styled(Icon) (at testingDummy.js:10)
  in View (created by Component)
  in Component (at testingDummy.js:9)
  in TestSum (at testingComp.test.js:9)

I have set up a react-native project and trying to test the components using jest. I have used react native default components and components from native-base.

If i am including components from react-native only jest is able to render it properly while if i include some component from native-base it's throwing error from script_transformer.

I was able to solve it by using transform and transformIgnorePatterns. But Issue is still there with react-vector-icon that is being used by native-base.

Here is package .json

{
  "name": "Canvas",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "android-dev": "ENVFILE=config/.env.dev react-native run-android",
    "android-staging": "ENVFILE=config/.env.staging react-native run-android",
    "android-prod": "ENVFILE=config/.env.prod react-native run-android",
    "ios-dev": "ENVFILE=config/.env.dev react-native run-ios",
    "ios-staging": "ENVFILE=config/.env.staging react-native run-ios",
    "ios-prod": "ENVFILE=config/.env.prod react-native run-ios --scheme prod",
    "build-android-prod": "export ENVFILE=config/.env.prod && cd android && ./gradlew assembleRelease && cd .."
  },
  "dependencies": {
    "axios": "0.18.0",
    "native-base": "2.8.1",
    "prop-types": "15.6.2",
    "react": "16.5.0",
    "react-native": "0.57.1",
    "react-native-branch": "^3.0.0-beta.1",
    "react-native-communications": "2.2.1",
    "react-native-config": "0.11.7",
    "react-native-dialog": "5.4.0",
    "react-native-document-picker": "^2.3.0",
    "react-native-maps": "0.22.1",
    "react-native-progress": "3.5.0",
    "react-native-progress-circle": "2.0.1",
    "react-native-responsive-screen": "1.1.10",
    "react-native-snap-carousel": "3.7.5",
    "react-native-vector-icons": "6.0.1",
    "react-native-webview": "2.5.0",
    "react-native-wkwebview-reborn": "2.0.0",
    "react-navigation": "2.17.0",
    "react-redux": "5.0.7",
    "redux": "4.0.1",
    "redux-devtools-extension": "2.13.5",
    "redux-thunk": "2.3.0",
    "socketcluster-client": "14.2.1"
  },
  "devDependencies": {
    "@babel/runtime": "7.0.0-beta.55",
    "ajv": "6.0.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "eslint": "5.6.1",
    "eslint-config-airbnb": "17.1.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "7.11.1",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.47.0",
    "q": "1.4.1",
    "react-test-renderer": "16.5.0",
    "ts-jest": "^24.0.1"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!native-base)/"
    ]
  }
} 

Here is test file

import React from 'react';
import 'react-native';
import TestComp from '../testingDummy';

import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(<TestComp />).toJSON();
  expect(tree).toMatchSnapshot();
});

here is the view

import React, { Component } from 'react';
import { View } from 'react-native'
import { Text, Icon } from 'native-base'

class TestSum extends Component {

  render() {
    return (
      <View>
        <Icon name="rupee" type="FontAwesome" style={{ color: '#000' }} />
        <Text>this is test</Text> 
      </View>
    );
  }
}

export default TestSum;

Answer 1

Had the same issue several times, had to remove babel.config.js and my dev dependencies are here:

"devDependencies": {
  "babel-jest": "24.8.0",
  "enzyme": "^3.10.0",
  "enzyme-adapter-react-16": "^1.14.0",
  "enzyme-to-json": "^3.3.5",
  "jest": "24.8.0",
  "jest-enzyme": "^7.0.2",
  "react-dom": "16.8.3",
  "redux-mock-store": "^1.5.3"
}

Answer 2

Had the same error when used with react-test-renderer :

TypeError: Cannot read property 'default' of undefined

To fix it, I mocked native-base's Icon component in my jest's setup file:

import React from 'react';
import { View } from 'react-native';
import * as nativeBase from 'native-base';
function MockIcon(props) { return <View {...props} />; }
nativeBase.Icon = MockIcon;

Answer 3

Try to add props also that you are passing in Icon Component.

import React from 'react';
import 'react-native';
import TestComp from '../testingDummy';

import renderer from 'react-test-renderer';


it('renders correctly', () => {
  const tree = renderer.create(<TestComp name="" type="" style={}/>).toJSON();
  expect(tree).toMatchSnapshot();
});