react-native-vector-icons: Cannot read property 'default' of undefined when testing with Jest

Review the documentation: https://github.com/oblador/react-native-vector-icons
Search for existing issues (including closed ones): https://github.com/oblador/react-native-vector-icons/issues

Environment

OS: MacOS 10.14.5 Target platform: Jest react-native-vector-icons version: 6.6.0 Jest version: 24.8.0

Description

Describe your issue in detail. Include screenshots if needed. I am facing an issue with react-native-vector-icons running in my tests with Jest.

The error:

 TypeError: Cannot read property 'default' of undefined

      14 |   test("second step register render correctly", () => {
      15 |     // @ts-ignore
    > 16 |     const wrapper = mount<SecondStepRegisterScreenImpl>(<SecondStepRegisterScreenImpl navigation={{}}/>)
         |                     ^
      17 |     wrapper.render()
      18 | 
      19 |     expect(wrapper.find(SafeAreaView)).toExist()

      at new Icon (node_modules/react-native-vector-icons/lib/create-icon-set.js:42:399)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11361:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:14687:5)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:15644:16)

First I am using react-native with ignite-bowser template which use typescript for react-native. ref: infinitered/ignite-bowser

Bellow my Jest configuration: the “jest-preset-ignite” preset: infinitered/jest-preset-ignite

module.exports = {
  preset: "jest-preset-ignite",
  transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!(jest-)?react-native|react-native|react-navigation|@react-navigation|@storybook|@react-native-community|@expo)"
  ],
  setupFilesAfterEnv: [
    "<rootDir>/test/setup-enzyme.ts"
  ],
  moduleNameMapper: {
    "^lodash-es$": "lodash"
  }
};

I have attempt to mock react-native-vector-icons package like that:

jest.mock("react-native-vector-icons")

But with no results.

Did I do something wrong?

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 8
Comments: 15

Commits related to this issue

fix(*): prevent Icon error in jest test cf. https://github.com/oblador/react-native-vector-icons/issues/1046#issuecomment-546112745 — committed to pnplab/Flux by nuKs 5 years ago
fix(*): prevent Icon error in jest test cf. https://github.com/oblador/react-native-vector-icons/issues/1046#issuecomment-546112745 — committed to pnplab/Flux by nuKs 5 years ago
test(*): remove duplicated jest js preprocessing Fixes `TypeError: Cannot read property 'default' of undefined at [new Icon ...]` type of errors in test using jest. see https://github.com/oblador/re... — committed to pnplab/Flux by nuKs 5 years ago

Most upvoted comments

Hello. I have the same issue. Im new in jest but found (temporary?) solution: Add constructor for Icon in create-vector-icon/lib/create-icon-set.js line 41

+10

RageOfJustice on Sep 19, 2019

These workarounds no longer appear to resolve this issue. I have the following configuration:

os: Ubuntu 20.04.1 LTS nodejs : v12.20.1 react-native: 0.62.2 jest: “^26.0.0”, ts-jest: “^26.5.1” react-native-vector-icons: “^6.6.0”,

Jest config:

 "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(ts|tsx)$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!react-native)"
    ],
    "setupFiles": [
      "<rootDir>/__mocks__/setup.tsx"
    ]
  },

Adding the constructor option to the Icon definition still presents me with the Cannot read property 'default' of undefined error.

mike-lawson on Mar 1, 2021

Edit: even better See this stackoverflow question for quick solution https://stackoverflow.com/a/56817282/939741 Issue is related to this react-native issue https://github.com/facebook/react-native/issues/22175

Previous answer.

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

According to https://github.com/facebook/react-native/pull/23326#issuecomment-468938589, 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",

nuKs on Nov 5, 2019