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?

[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

[mike-lawson]

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.