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

[loic-lopez]

• [x] Review the documentation: https://github.com/oblador/react-native-vector-icons
• [x] 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?

[terreb]

I get the same, have you found a solution?

[rheutz]

I get the same error after upgrading my RN version to 0.59.10. You have found any solution for this issue?

[RageOfJustice]

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

[SimonErm]

seems to be a problem with jest and the test renderer: https://github.com/facebook/react-native/issues/22437

[nuKs]

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",

[auguszou]

same problem in test

    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-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)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:19312:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:19352:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:19435:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:20342:7)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:20090:7)
      at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:19911:5)

### Environment

os: mac 10.13.6
nodejs : v10.17.0
react-native: 0.61.4
jest: "^24.9.0",
react-native-vector-icons: "^6.6.0",

[nuKs]

same problem in test

    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-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)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:19312:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:19352:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:19435:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:20342:7)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:20090:7)
      at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:19911:5)

Environment

os: mac 10.13.6
nodejs : v10.17.0
react-native: 0.61.4
jest: "^24.9.0",
react-native-vector-icons: "^6.6.0",

I think the problem might not be related to react-native-vector-icons.
Have you tried one of my solutions above ?

[auguszou]

@nuKs test passed after tried your solution.

Is there any better solution to this problem?

[nuKs]

@nuKs test passed after tried your solution.

Is there any better solution to this problem?

Both solution I mentioned should work. I suspect you tried the one written in the message. The cleanest one is by far the stackoverflow one.
https://stackoverflow.com/questions/56814268/how-to-mock-a-third-party-react-native-component-with-jest/56817282#56817282

I think you wont be able to find anything better, since it's just about fixing jest config.
It fixes the problem for any potential related code, not just react-native-vector-icons, and is very unlikely to bubble up with additional issues :-)

[auguszou]

yes. fixed this problem by removing transform key specified in jest.config.js or jest setup in packages.json

Thanks.

[nuKs]

Welcome!

Ftr,
I edited my original post with a link to the related react-native issue for more info.
We should close this issue.

[lgh06]

see also https://github.com/facebook/react-native/issues/26579 . maybe wrongly mocked react-native

[chelseatroy]

I am here to say, this works. Thank you! I don't love having to mock out the constructor, but with as many dependencies as we have flying around, I get how incompatibilities like this can happen and I appreciate that we have a way around it until maintainers can get to a fix!

[Angelk90]

Hi @loic-lopez, @terreb, @rheutz, @RageOfJustice, @SimonErm, @nuKs, @auguszou, @lgh06, @chelseatroy:

I think I have a problem related to this: #1292

Can anyone help me out?