Cannot read property 'default' of undefined when testing with Jest

loic-lopez commented 5 years ago

[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 commented 5 years ago

I get the same, have you found a solution?

rheutz commented 5 years ago

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

RageOfJustice commented 5 years ago

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 commented 5 years ago

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

nuKs commented 5 years ago

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

augus-zz commented 5 years ago

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 commented 5 years ago

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 ?

augus-zz commented 5 years ago

@nuKs test passed after tried your solution.

Is there any better solution to this problem?

nuKs commented 5 years ago

@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 :-)

augus-zz commented 5 years ago

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

Thanks.

nuKs commented 5 years ago

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 commented 4 years ago

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

chelseatroy commented 4 years ago

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 commented 3 years ago

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?

mike-lawson commented 3 years ago

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.

oblador / react-native-vector-icons