Metro: Cannot use latest version of metro-react-native-babel-preset

[lucianomlima]

Do you want to request a feature or report a bug?

Bug Report

What is the current behavior?

We have a RN app. For a long time, we using [email protected]. So we made an upgrade to v0.59.4. We cannot use latest version of metro-react-native-babel-preset because cause errors on tests. We downgraded to 0.45.0.
Now, upgrade our app again to version 0.59.6 to support hooks in tests with enzyme.
But again, latest version of metro-react-native-babel-preset doesn't work. The max version works is 0.45.6. 0.46+ tests failure with error:

TypeError: cannot read property "default" of undefined only when run tests. I try several approaches like create a clean app and move code, update jest, update enzyme + adapter, use latest @babel/*. No one works. The weird part it's don't show where line cause the error.

I try to change some of these components to a simple <View><Text>Test</Text></View> but error persists. I can't reproduce this with a clean app and because our app is relatively big, it's hard to find what is causing this problem.

Here are some of the errors that is showed on terminal:

FAIL src/screens/MyAccountScreen/__tests__/index.js
  ● Test suite failed to run

    TypeError: Cannot read property 'default' of undefined

      24 | 
      25 | const labelStyleObject = colorsArray.reduce(
    > 26 |   (acc, color) => ({
         |                     ^
      27 |     ...acc,
      28 |     [color]: {
      29 |       backgroundColor: mystique[`${color}500`],

      at src/components/Label/index.js:26:69
          at Array.reduce (<anonymous>)
      at Object.<anonymous> (src/components/Label/index.js:25:36)
      at Object.<anonymous> (src/screens/MyAccountScreen/__tests__/index.js:32:1242)
FAIL src/screens/LoginScreen/__tests__/index.js (31.129s)
  ● Console

    console.log src/hoc/with-metrics-dispatcher.js:20
      "UserAccount.LoginView" event was not sent. No metrics should be sent when user is admin or is in debug mode. Event props: undefined { from_component: 'AppLoginScreen' }

  ● <LoginConnected /> › should close Onboarding at last button click

    TypeError: Cannot read property 'default' of undefined

      62 | });
      63 | 
    > 64 | export class Onboarding extends React.Component<Props> {
         |                                                         ^
      65 |   onboarding: ?OnboardingSwiper;
      66 |   goToNext = () => this.onboarding && this.onboarding.goNext();
      67 |   pages: Array<Pages> = [

      at new Onboarding (src/components/Onboarding/index.js:64:415)
      at ReactShallowRenderer.render (node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:131:30)
      at node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:549:53
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:549:38)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:265:22)
      at ShallowWrapper.wrap (node_modules/enzyme/build/ShallowWrapper.js:1988:16)
      at ShallowWrapper.<anonymous> (node_modules/enzyme/build/ShallowWrapper.js:1427:26)
      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1960:25)
      at ShallowWrapper.shallow (node_modules/enzyme/build/ShallowWrapper.js:1426:21)

PASS src/stores/global/__tests__/actions.js
PASS src/screens/AlertEdition/__tests__/index.js
FAIL src/components/MyPlan/__tests__/MyPlanEdit.js (11.631s)
  ● <MyPlanEditContainer /> › render › should render properly

    TypeError: Cannot read property 'default' of undefined

      74 |   BaseComponent: SComponent<P & Props>
      75 | ): ClassComponent<$Diff<P, ProvidedProps & Props>> {
    > 76 |   class WithPlanBuilder extends React.Component<P & Props> {
         |                                                             ^
      77 |     // Using `Object` because SyntheticEvent from RN is confliting with react-dom
      78 |     onMessage = (event: Object, webViewprops: WebViewProps) => {
      79 |       if (isPaidEvent(event.nativeEvent.data)) {

      at new WithPlanBuilder (src/hoc/withPlanBuilder.js:76:437)
      at ReactShallowRenderer.render (node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:131:30)
      at node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:549:53
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:549:38)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:265:22)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.<anonymous> (src/components/MyPlan/__tests__/MyPlanEdit.js:319:41)

FAIL src/components/ConversationHeaderTitle/__tests__/index.js
  ● <ConversationHeaderTitle /> › render › should render properly with empty typing

    TypeError: Cannot read property 'default' of undefined

      87 | `;
      88 | 
    > 89 | export class ConversationHeaderTitle extends React.Component<Props> {
         |                                                                      ^
      90 |   viewContact = () => {
      91 |     const {
      92 |       navigation,

      at new ConversationHeaderTitle (src/components/ConversationHeaderTitle/index.js:89:467)
      at ReactShallowRenderer.render (node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:131:30)
      at node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:549:53
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:549:38)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:265:22)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.<anonymous> (src/components/ConversationHeaderTitle/__tests__/index.js:30:41)
  ● <FieldView /> › behavior › should not copy to clipboard if copyMessage isn't provided

    TypeError: Cannot read property 'default' of undefined

      44 | };
      45 | 
    > 46 | class FieldView extends React.Component<Props> {
         |                                                 ^
      47 |   onLongPress = () => {
      48 |     const { copyMessage, value } = this.props;
      49 |     if (copyMessage) {

      at new FieldView (src/components/FieldView/index.js:46:411)
      at ReactShallowRenderer.render (node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:131:30)
      at node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:549:53
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/src/Utils.js:99:18)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:549:38)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:265:22)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.<anonymous> (src/components/FieldView/__tests__/index.js:67:41)

What is the expected behavior?

Can run tests properly

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

package.json

{

  "name": "MyApp",

  "version": "0.1.0",

  "private": true,

  "scripts": {},

  "devDependencies": {

    "@babel/core": "^7.4.0",

    "@babel/plugin-syntax-flow": "^7.0.0",

    "@babel/preset-flow": "^7.0.0",

    "@babel/runtime": "^7.4.0",

    "appcenter-cli": "^1.1.15",

    "babel-core": "^7.0.0-bridge.0",

    "babel-eslint": "^7.2.3",

    "babel-jest": "^23.4.0",

    "babel-plugin-relay": "^1.6.0",

    "babel-plugin-root-import": "6.1.0",

    "detox": "12.3.0",

    "enzyme": "^3.9.0",

    "enzyme-adapter-react-16": "^1.12.1",

    "enzyme-to-json": "^3.3.5",

    "eslint": "^3.19.0",

    "eslint-config-airbnb": "^15.0.1",

    "eslint-config-prettier": "^3.1.0",

    "eslint-import-resolver-babel-root-import": "^0.0.2",

    "eslint-plugin-flowtype": "^2.34.0",

    "eslint-plugin-import": "^2.2.0",

    "eslint-plugin-jsx-a11y": "^5.0.1",

    "eslint-plugin-jsx-control-statements": "^2.2.1",

    "eslint-plugin-prettier": "^3.0.0",

    "eslint-plugin-react": "^7.11.1",

    "eslint-plugin-react-native": "^3.3.0",

    "fetch-mock": "^7.3.0",

    "flow-bin": "0.92.0",

    "graphql": "0.13.2",

    "jest": "^23.4.1",

    "metro-react-native-babel-preset": "~0.45.0",

    "prettier": "^1.14.3",

    "react-dom": "16.8.6",

    "react-test-renderer": "16.8.6",

    "reactotron-react-native": "^2.1.0",

    "relay-compiler": "1.6.0",

    "sync-request": "^5.0.0",

    "timekeeper": "^2.0.0"

  },

  "dependencies": {

    "base-64": "^0.1.0",

    "cpf_cnpj": "^0.2.0",

    "date-diff": "^0.2.0",

    "diacritics": "^1.3.0",

    "formik": "^1.4.2",

    "highlight-words-core": "^1.2.2",

    "hoist-non-react-statics": "^2.5.0",

    "instabug-reactnative": "^8.2.0",

    "intl": "^1.2.5",

    "jsc-android": "^224109.1.0",

    "jsx-control-statements": "^3.2.5",

    "lodash": "^4.17.4",

    "moment": "^2.20.1",

    "native-base": "^2.12.1",

    "querystring": "^0.2.0",

    "react": "16.8.6",

    "react-intl": "^2.4.0",

    "react-native": "0.59.6",

    "react-native-animatable": "git://github.com/jusbrasil/react-native-animatable.git#master",

    "react-native-autocomplete-input": "^3.6.0",

    "react-native-code-push": "^5.6.0",

    "react-native-communications": "^2.2.1",

    "react-native-config": "^0.11.5",

    "react-native-cookie": "^0.2.0",

    "react-native-datepicker": "^1.7.2",

    "react-native-elements": "^1.0.0-beta5",

    "react-native-fbsdk": "^0.7.0",

    "react-native-firebase": "^4.3.7",

    "react-native-gesture-handler": "^1.1.0",

    "react-native-gifted-chat": "https://github.com/FaridSafi/react-native-gifted-chat/archive/1fedba2203e29d35832e4939e1857f44ab398ab9.tar.gz",

    "react-native-google-signin": "1.0.0-rc7",

    "react-native-htmlview": "^0.13.0",

    "react-native-keyboard-accessory": "^0.1.9",

    "react-native-onboarding-swiper": "^0.7.1",

    "react-native-picker-select": "https://github.com/jusbrasil/react-native-picker-select/archive/a19724bbfa15d3231dd8adc3e9f3082f92a259f6.tar.gz",

    "react-native-restart": "^0.0.7",

    "react-native-sentry": "^0.39.0",

    "react-native-splash-screen": "^3.1.1",

    "react-native-vector-icons": "^5.0.0",

    "react-navigation": "^3.8.1",

    "react-redux": "^5.0.7",

    "react-relay": "1.6.0",

    "react-relay-network-modern": "^2.3.4",

    "react-timer-mixin": "^0.13.4",

    "recompose": "^0.26.0",

    "redux": "^3.7.2",

    "redux-logger": "^3.0.6",

    "redux-persist": "^5.10.0",

    "redux-persist-transform-filter": "^0.0.18",

    "redux-reset": "^0.3.0",

    "relay-runtime": "1.6.0",

    "rn-placeholder": "^1.2.0",

    "timezone": "^1.0.13",

    "url": "^0.11.0"

  },

  "jest": {

    "preset": "react-native",

    "timers": "fake",

    "setupTestFrameworkScriptFile": "./src/tests/setup.js",

    "testMatch": [ "/__tests__//.(js|ts)", "/?(.)+(test).(js|ts)" ],

    "transformIgnorePatterns": [

      "node_modules/e2e/(?!((jest-)?react-native|react-clone-referenced-element|@expo(nent)?/.*|@react-navigation|react-navigation|react-native-gesture-handler|native-base|rn-placeholder|instabug-reactnative))"

    ],

    "transform": {

      "^.+\.js$": "/src/tests/jest-preprocessor.js"

    },

    "snapshotSerializers": [

      "enzyme-to-json/serializer"

    ]

  },

  "rnpm": {

    "assets": [

      "./src/assets/fonts/"

    ]

  },

  "prettier": {

    "printWidth": 100,

    "tabWidth": 2,

    "singleQuote": true,

    "trailingComma": "es5",

    "parser": "flow"

  }

}

  

Environment info

  React Native Environment Info:

    System:

      OS: macOS 10.14.4

      CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz

      Memory: 119.82 MB / 8.00 GB

      Shell: 5.3 - /bin/zsh

    Binaries:

      Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node

      Yarn: 1.13.0 - ~/.nvm/versions/node/v10.15.3/bin/yarn

      npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm

      Watchman: 4.9.0 - /usr/local/bin/watchman

    SDKs:

      iOS SDK:

        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2

      Android SDK:

        Build Tools: 23.0.3, 24.0.3, 25.0.3, 26.0.3, 27.0.2, 27.0.3, 28.0.3

        API Levels: 23, 24, 25, 26, 27, 28

    IDEs:

      Android Studio: 3.3 AI-182.5107.16.33.5314842

      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild

    npmPackages:

      react: 16.8.6 => 16.8.6

      react-native: 0.59.6 => 0.59.6

    npmGlobalPackages:

      react-native-cli: 2.0.1

      react-native-git-upgrade: 0.2.7

  

[lucianomlima]

Works now with version 0.51.0