Jest unit tests fail when upgrading to react native 0.66.0

[swabbass]

Description

Upgrading project from react-native 0.63.2 to 0.66.0 caused jest tests to fail
Note: The project setup was working fine with react-native 0.63.x.

 ● Test suite failed to run

    Unknown option: .browserslistConfigFile. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

      at throwUnknownError (node_modules/@babel/core/lib/config/validation/options.js:124:27)
      at node_modules/@babel/core/lib/config/validation/options.js:109:5
          at Array.forEach (<anonymous>)
      at validateNested (node_modules/@babel/core/lib/config/validation/options.js:85:21)
      at validate (node_modules/@babel/core/lib/config/validation/options.js:76:10)
      at loadPrivatePartialConfig (node_modules/@babel/core/lib/config/partial.js:78:50)
          at loadPrivatePartialConfig.next (<anonymous>)
      at loadFullConfig (node_modules/@babel/core/lib/config/full.js:57:46)
          at loadFullConfig.next (<anonymous>)
      at Function.<anonymous> (node_modules/@babel/core/lib/config/index.js:33:43)

React Native version:

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 7.24 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/Desktop/work/wix/react-native-navigation/node_modules/.bin/npm
    Watchman: 2021.09.27.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7678000
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.0 => 0.66.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Follow React Native Upgrade Helper to upgrade, tests are failing.

Expected Results

Unit tests running normally.

Snack, code example, screenshot, or link to a repository:

Dependencies:

  "devDependencies": {
    "@babel/core": "~7.12.9",
    "@babel/runtime": "~7.12.5",
    "@babel/plugin-proposal-export-default-from": "7.10.1",
    "@babel/plugin-proposal-export-namespace-from": "7.10.1",
    "@babel/types": "7.6.x",
    "@react-native-community/blur": "^3.6.0",
    "@react-native-community/datetimepicker": "^3.4.7",
    "@react-native-community/eslint-config": "^2.0.0",
    "@react-native-community/netinfo": "^5.9.4",
    "@testing-library/jest-native": "^4.0.1",
    "@testing-library/react-native": "^7.2.0",
    "@types/detox": "16.4.1",
    "@types/hoist-non-react-statics": "^3.0.1",
    "@types/jasmine": "3.5.10",
    "@types/jest": "26.0.3",
    "@types/lodash": "^4.14.149",
    "@types/react": "16.9.41",
    "@types/react-native": "0.63.1",
    "@types/react-test-renderer": "16.9.2",
    "@typescript-eslint/eslint-plugin": "3.3.0",
    "@typescript-eslint/parser": "3.3.0",
    "babel-jest": "^26.6.3",
    "clang-format": "^1.4.0",
    "detox": "18.19.0",
    "eslint": "7.3.0",
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-prettier": "3.1.4",
    "github-release-notes": "https://github.com/yogevbd/github-release-notes/tarball/e601b3dba72dcd6cba323c1286ea6dd0c0110b58",
    "husky": "4.2.5",
    "identity-obj-proxy": "3.0.0",
    "jest": "^26.6.3",
    "jest-circus": "^26.6.3",
    "lint-staged": "10.2.11",
    "metro-react-native-babel-preset": "^0.66.2",
    "prettier": "2.1.2",
    "react": "17.0.2",
    "react-native": "0.66.0",
    "react-native-fast-image": "^8.3.4",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-ui-lib": "5.11.0",
    "react-redux": "5.x.x",
    "react-test-renderer": "17.0.2",
    "redux": "3.x.x",
    "semver": "5.x.x",
    "shell-utils": "1.x.x",
    "ts-mockito": "^2.3.1",
    "typedoc": "0.x.x",
    "typescript": "3.9.5",
    "detox-testing-library-rnn-adapter": "2.x.x",
    "remx": "3.x.x"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "roots": [
      "<rootDir>/lib/src/",
      "<rootDir>/playground/src/",
      "<rootDir>/integration/",
      "<rootDir>/scripts/",
      "<rootDir>/e2e/"
    ],
    "setupFilesAfterEnv": [
      "./jest-setup.js"
    ],
    "moduleNameMapper": {
      "react-native-navigation/Mock": "<rootDir>/lib/src/Mock",
      "react-native-navigation": "<rootDir>/lib/src",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/playground/img/layouts@2x.png"
    },
    "collectCoverageFrom": [
      "lib/src/**/*.ts",
      "lib/src/**/*.tsx",
      "integration/**/*.js",
      "!lib/dist/index.js",
      "!lib/dist/Navigation.js",
      "!lib/dist/adapters/**/*",
      "!lib/dist/interfaces/**/*",
      "!lib/dist/**/*.test.*",
      "!integration/**/*.test.*",
      "!integration/*.test.*",
      "!e2e/**/*test.js"
    ],
    "resetMocks": true,
    "resetModules": true,
    "coverageReporters": [
      "json",
      "lcov",
      "text",
      "html"
    ]
  },

Babel.config:

module.exports = function (api) {
  api && api.cache(false);
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      '@babel/plugin-proposal-export-namespace-from',
      '@babel/plugin-proposal-export-default-from',
    ],
  };
};

[swabbass]

The above setup works fine when using react native 0.65.1

[YanislavSpaceIQ]

Same here..

[swabbass]

@YanislavSpaceIQ
I did change my jest.config.js to:

 transform: {
    '\\.[jt]sx?$': 'babel-jest',
    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
  },

make sure to have "babel-jest": "^26.6.3", installed, but I'm sure something is not working well.
also, you might want to change those too:

 "@babel/core": "7.15.8",
 "@babel/runtime": "7.15.4",

Think that in rn66 they changed something in the jest/preprocessor.js that caused all that.

[YanislavSpaceIQ]

Doesn't help. I've noticed that almost all failed test cases are testing components that use Modal imported from react-native module. I checked changed files in 0.66 release and found some changes regarding Modal component. So maybe this is the cause of such behaviour. #32346

[lunaleaps]

#32346 isn't part of 0.66 release

[swabbass]

For us, we don't think that it could be related to modal, since we have tests for a lot of components that does not include Modal, and still fails, on the same thing, it seems that something messing up with babel, or jest preprocessor,
The interesting thing is that why this does not happen on RN 0.65? and it happens on RN 0.66, what did they change in their code that caused this? the diff is huge and the errors thrown by babel/jest are not very helpfull.

[MartinInAction]

I patched react-native@0.66.1 to use the jest/preprocessor.js from react-native@0.65.1, and jest works again!

[Sandy-Garrido]

I seem to be having the exact same issue.
Tried the solutions in the thread but none seem to work :(

UPDATE: I'm not sure what I tried the first time around but actually - it is the preprocessor.js from react-native. I did the same as @SuperDuperMartin and it started to work (had to alter a few other things but ultimately, the preprocessor is causing the main problems) & it would be good to add this in a 0.66.2 patch we don't want to revert to 0.65.1 due to iOS 15 support in 0.66.0

[swabbass]

I patched react-native@0.66.1 to use the jest/preprocessor.js from react-native@0.65.1, and jest works again!

I think that would be great if they release 0.66.2 and resolve it, but for our project, we moved to babel-jest and seems to work fine, but I have doubts about babel-jest, I prefer to use the official react-native version, just for consistency, waiting for an official patch.

[lunaleaps]

@swabbass Feel free to bring this up in the 0.66.2 discussion: reactwg/react-native-releases#3

[diegotsi]

any news? we are facing the same problem on 0.66.2