Tests Fail in New CLI Project Due to Jest 28

[CodingItWrong]

Description

A new project generated with npx react-native init is created with jest and babel-jest dependencies of version 28.x. This causes the generated __tests__/App-test.js file to fail with errors including (full output further below)

• Invalid return value: process() or/and processAsync() method of code transformer found at "…/node_modules/react-native/jest/assetFileTransformer.js" should return an object or a Promise resolving to an object. The object must have code property with a string of processed code. This error may be caused by a breaking change in Jest 28: https://jestjs.io/docs/upgrading-to-jest28#transformer
• Jest did not exit one second after the test run has completed.

That error note about Jest 28 appears to be correct; downgrading to 27 fixes the errors.

I'd recommend that jest and babel-jest be locked to 27.x until all relevant dependencies are updated to work with 28.x

Version

0.68.1

Output of npx react-native info

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 8.48 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.7.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/josh/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.68.1 => 0.68.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

• Create a new project with npx react-native init YourProjectName
• cd into it and run yarn test. You should see the following output, and the tests should hang:

  console.error
    The above error occurred in the <Header> component:

        at Header (/Users/josh/apps/JestSandbox/node_modules/react-native/Libraries/NewAppScreen/components/Header.js:18:22)
        at View
        at Component (/Users/josh/apps/JestSandbox/node_modules/react-native/jest/mockComponent.js:28:18)
        at RCTScrollView
        at Component (/Users/josh/apps/JestSandbox/node_modules/react-native/jest/mockNativeComponent.js:17:18)
        at ScrollViewMock (/Users/josh/apps/JestSandbox/node_modules/react-native/jest/mockScrollView.js:21:52)
        at RCTSafeAreaView
        at Component (/Users/josh/apps/JestSandbox/node_modules/react-native/jest/mockNativeComponent.js:17:18)
        at SafeAreaView
        at App (/Users/josh/apps/JestSandbox/App.js:56:22)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10989:23)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11022:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3662:12)
      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)

 FAIL  __tests__/App-test.js (7.452 s)
  ✕ renders correctly (4963 ms)

  ● renders correctly

    ● Invalid return value:
      `process()` or/and `processAsync()` method of code transformer found at
      "/Users/josh/apps/JestSandbox/node_modules/react-native/jest/assetFileTransformer.js"
      should return an object or a Promise resolving to an object. The object
      must have `code` property with a string of processed code.
      This error may be caused by a breaking change in Jest 28:
      https://jestjs.io/docs/upgrading-to-jest28#transformer
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation


      at ScriptTransformer._buildTransformResult (node_modules/@jest/transform/build/ScriptTransformer.js:507:15)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:628:17)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:822:19)
      at require (node_modules/react-native/Libraries/NewAppScreen/components/Header.js:23:15)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        7.527 s
Ran all test suites.
Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

• Downgrade jest and babel-jest to ^27, then rerun yarn test. You should see:

 PASS  __tests__/App-test.js (6.309 s)
  ✓ renders correctly (4430 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.372 s
Ran all test suites.
✨  Done in 8.19s.

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

https://github.com/CodingItWrong/rn-cli-jest-28-errors demonstrates the issue. The main branch is the default project created and shows the problem, and the jest27 branch downgrades to Jest 27 and shows the fix.

[cortinico]

A new project generated with npx react-native init is created with jest and babel-jest dependencies of version 28.x

I've just tested it and this is not the case. I have this package.json after a
npx react-native init RN0681 --version 0.68.1

  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.68.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2"
  },

Therefore I suppose you're usign a different template.

[CodingItWrong]

@cortinico I just retested, and npx react-native init gives different results whether you do or don't specify --version 0.68.1. If I specify the version as you did, I see jest 26.x as you showed.

If I don't specify the version, and I run npx react-native init RNLatest, I get: (note Jest 28.*)

  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.68.1"
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/runtime": "^7.17.9",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^28.0.3",
    "eslint": "^8.14.0",
    "jest": "^28.0.3",
    "metro-react-native-babel-preset": "^0.70.2",
    "react-test-renderer": "17.0.2"
  },

I understand that it may not be intended behavior that not specifying the version gives different results, but there does appear to be a difference.

[cortinico]

Just tested again with npx react-native init without a version and that's the package.json I get:

  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.68.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2"
  }

[CodingItWrong]

Hmm, although the output of my npx react-native info command above indicated that I didn't have react-native-cli installed globally, I tried running npm uninstall react-native-cli and then rerunning npx react-native init RNLatest, and then I get the Jest 26 output as you show. But now that I've uninstalled it, rerunning npx react-native info gives "Unrecognized command" so I can't reconfirm the state now.

In any case, I think that means this issue can be closed. Whatever CLI weirdness is going on, we've both confirmed that we see the correct Jest version outputted with no globally-installed CLI.

[param-finder]

I'm facing the same error after upgrading to "jest": "^28.1.0", from version 26.

 FAIL  src/screens/Auth/__tests__/Login.test.tsx
  ● Test suite failed to run

    ● Invalid return value:
      `process()` or/and `processAsync()` method of code transformer found at
      "/Users/parmindersingh/Documents/FinderUK/node_modules/react-native/jest/assetFileTransformer.js"
      should return an object or a Promise resolving to an object. The object
      must have `code` property with a string of processed code.
      This error may be caused by a breaking change in Jest 28:
      https://jestjs.io/docs/upgrading-to-jest28#transformer
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation


      at ScriptTransformer._buildTransformResult (node_modules/@jest/transform/build/ScriptTransformer.js:507:15)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:628:17)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:822:19)
      at Object.<anonymous> (node_modules/react-native-ratings/dist/SwipeRating.js:5:20)

npx react-native info gives

System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 4.74 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8092744
    Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: ^0.68.2 => 0.68.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found