Cannot read property ‘default’ of undefined when testing with Jest in oblador react-native-vector-icons

Explanation of the problem

This issue is related to the implementation of react-native-vector-icons in a Jest test environment. The error message states that there is a TypeError: Cannot read property 'default' of undefined when trying to mount the component SecondStepRegisterScreenImpl which is using react-native-vector-icons. The environment information includes the following:

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

The project is using the ignite-bowser template which uses TypeScript for React Native and the jest-preset-ignite preset for Jest configuration. The following is the Jest configuration for the project:

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"
  }
};

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Cannot read property ‘default’ of undefined when testing with Jest in oblador react-native-vector-icons

jest.mock("react-native-vector-icons/Fontisto", () => "Fontisto");

jest.mock("react-native-vector-icons/lib/create-icon-set", () => jest.fn());

Other popular problems with oblador react-native-vector-icons

Problem: “Module not found: Can’t resolve ‘react-native-vector-icons/Fontisto'” Error

This issue arises when the Fontisto module is not found in the react-native-vector-icons library. The error message appears when trying to import or use the Fontisto icon set.

Solution:

This issue arises when the Fontisto module is not found in the react-native-vector-icons library. The error message appears when trying to import or use the Fontisto icon set.

npm install react-native-vector-icons

Problem: Icon is not displayed or renders incorrectly

This issue occurs when the specified icon is not found or is rendered incorrectly. This can happen if the wrong font file is used or if the font file is missing.

Solution:

Verify that the specified font file is included in the project and that it is the correct file for the desired icon set. Check the file path to make sure it is correct and try importing the font file directly in the code.

import { createIconSetFromIcoMoon } from "react-native-vector-icons";
import icoMoonConfig from "path/to/icomoon.json";
const Icon = createIconSetFromIcoMoon(icoMoonConfig);

Problem: “Cannot read property ‘default’ of undefined” Error when testing with Jest

This issue occurs when testing with Jest and the react-native-vector-icons library is not correctly mocked. The error message appears because Jest is trying to access the default property of an undefined module.

Solution:

The issue can be resolved by adding the following code to the Jest setup file:

jest.mock("react-native-vector-icons/Fontisto", () => "Fontisto");

Alternatively, you can also mock the create-icon-set module in a similar fashion:

jest.mock("react-native-vector-icons/lib/create-icon-set", () => jest.fn());

Most popular use cases for oblador react-native-vector-icons

1. Incorporating Icons in Your Application: Oblador react-native-vector-icons is designed to be used in React Native applications. It provides a simple API for importing and using icons, which can be used to enhance the look and feel of your application. A code block to import an icon using oblador react-native-vector-icons is shown below:

import Icon from 'react-native-vector-icons/MaterialIcons';
...

<Icon name="check-circle" size={30} color="#900" />

<Icon name="check-circle" size={30} color="#900" />