React-native-testing-library: TypeError: Cannot read property 'default' of undefined

[ptrckhjnl]

I am not sure if this is a problem of react-native-testing-library or react-native-vector-icons.

Versions

"react": "^16.8.1",
"react-native": "^0.58.4",
"react-native-testing-library": "^1.5.0",
"react-test-renderer": "^16.8.1"

Description

    TypeError: Cannot read property 'default' of undefined

      at new Icon (node_modules/react-native-vector-icons/lib/create-icon-set.js:30:104)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3422:22)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6592:9)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7549:20)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11218:16)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11250:28)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11333:11)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12221:11)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12133:11)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12107:7)

Reproducible Demo

The test where the error happens:

MenuItems/test.tsx

describe("Prop: onPress", () => {
    const onPressMock = jest.fn();

    it("calls the passed callback when the menuItems(TouchableOpacity) was pressed", () => {
      const { getByTestId } = render(
        <MenuItems
          {...testProps}
          setModalVisible={onPressMock}
          setView={onPressMock}
        />
      );

      fireEvent.press(getByTestId("123"));
      expect(onPressMock).toHaveBeenCalledTimes(1);
    });
  });

MenuItems/index.tsx

export default class MenuItems extends Component<IProps> {
  public render() {
    return (
      <View style={styles.containerWrapper}>
        {this.props.icons.map(item => (
          <TouchableOpacity
            onPress={() => {
              this.props.setModalVisible();
              this.props.setView(item.id);
            }}
            key={item.id}
            style={styles.container}
          >
            <Icon name={item.icon} size={30} style={styles.icon} />
            <Text style={styles.text}>{item.name}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

[thymikee]

This is likely issue with transpiling react-native-vector-icons by Jest, not anything to do with this library. Can you provide a repro we can download? Adding Jest and Babel config will also be helpful.

[ptrckhjnl]

@thymikee thank you for the fast reply!

Unfortunately not (it's a proprietary project). But i can add the Jest and Babel config.

jest.config.js

const { defaults: tsjPreset } = require("ts-jest/presets");

module.exports = {
  ...tsjPreset,
  preset: "react-native",
  transform: {
    ...tsjPreset.transform,
    "\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
  },
  globals: {
    "ts-jest": {
      babelConfig: true,
    },
  },
  cacheDirectory: ".jest/cache",
  collectCoverage: true,
  coveragePathIgnorePatterns: ["<rootDir>/src/res"],
};

babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset"]
}

[thymikee]

Looks like an issue with ts-jest to me. Can you make sure you use it according to documentation? They do breaking change in minor releases (e.g. 23.10.x)

[thymikee]

Anyway, this is not the issue with this library, it's with your Jest configuration, so closing.

Feel free to send your package.json and what it resolves to (run npx envinfo --preset jest)

[ptrckhjnl]

package.json

{
  "name": "...",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "start:android": "node node_modules/react-native/local-cli/cli.js run-android",
    "start:ios": "node node_modules/react-native/local-cli/cli.js run-ios",
    "test": "jest",
    "tsc": "tsc",
    "style": "prettier --check \"src/**/*.{tsx,ts}\"",
    "lint": "tslint -p tsconfig.json -c tslint.json \"src/**/*.{tsx,ts}\""
  },
  "dependencies": {
    "react": "^16.8.1",
    "react-native": "^0.58.4",
    "react-native-animatable": "^1.3.1",
    "react-native-material-menu": "^0.4.2",
    "react-native-progress": "^3.5.0",
    "react-native-side-menu": "^1.1.3",
    "react-native-vector-icons": "^6.3.0",
    "react-navigation": "^3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@types/jest": "^24.0.4",
    "@types/react": "^16.8.2",
    "@types/react-native": "^0.57.35",
    "@types/react-native-material-textfield": "^0.12.2",
    "@types/react-navigation": "^3.0.2",
    "@types/react-native-vector-icons": "^4.6.4",
    "@types/react-test-renderer": "^16.8.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": ">=22.0.0 <24.0.0",
    "jest": ">=22.0.0 <24.0.0",
    "metro-react-native-babel-preset": "^0.51.1",
    "prettier": "^1.16.4",
    "react-native-testing-library": "^1.5.0",
    "react-test-renderer": "^16.8.1",
    "ts-jest": "^23.10.5",
    "tslint": "^5.12.1",
    "tslint-config-airbnb": "^5.11.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-config-standard": "^8.0.1",
    "tslint-react": "^3.6.0",
    "typescript": "^3.3.3"
  }
}

npx envinfo --preset jest

  System:
    OS: Linux 4.20 Manjaro Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 11.10.0 - /usr/bin/node
    Yarn: 1.13.0 - /usr/bin/yarn
    npm: 6.8.0 - /usr/bin/npm
  npmPackages:
    jest: >=22.0.0 <24.0.0 => 23.6.0 

[maximedupre]

Hey @ptrckhjnl! Did you find a solution? Thanks :).

EDIT

Solution here