[SOLVED][Jest] Testing fails when using Input component

Explain what you did Test a component that wraps RNE’s Input component.

Expected behaviour Test should pass without error

Describe the bug Using the Input component results to a TypeError: Cannot read property 'default' of undefined error. Other components work just fine. Updates:

• I found out that it’s not just the Input component. It’s also happening with these other components:

• The error seems to only occur when testing. I tried running the app on my device and it’s working.

• CheckBox

• Icon

• SearchBar

• PricingCard (as a result of rendering Icon)

• SocialIcon (as a result of rendering icon)

To Reproduce I’m using the TypeScript template of react-native. Setup with react-native-navigation. Using yarn workspaces + Lerna. Added testing using ts-jest + react-native-testing-library after. Encountered an error with Jest that was fixed by adding babel-core@7.0.0-bridge.0.

1. Clone the sample repository. This is a stripped down repository without Yarn Workspaces + Lerna. It’s also only using react-test-renderer for snapshot testing. It contains a Hello component that renders an Input component from RNE. The test for this component is just a snapshot test.
2. yarn install
3. yarn jest

Possible Solution Can’t think of anything that might be causing this issue as of now. I think it’s an issue on my test environment setup as the error only occurs during testing.

Screenshots

Your Environment (please complete the following information):

software	version
react-native-elements	1.0.0-beta5
react-native	0.57.5
yarn	1.12.3

Solution Use js-with-babel instead of the defaults preset from ts-jest/presets.

// jest.config.js
// const { jsWithBabel: tsjPreset } = require('ts-jest/presets');

module.exports = {
  // [...]
}

[kdbcinco]

@iRoachie Hey! I’ve resolved the issue. It’s got something to do with the ts-jest preset used. I was using the defaults ts-jest preset. Tried changing it to jsWithBabel and I’m not getting the aforementioned error anymore. Updating the issue. Thanks @iRoachie

References:

• ts-jest presets

[kdbcinco]

@iRoachie Hello! Here’s the repo. I found out that it’s not just the Input component. It’s also happening with these other components:

• CheckBox
• Icon
• SearchBar
• PricingCard (as a result of rendering Icon)
• SocialIcon (as a result of rendering icon)