test script fails in 0.76-nightlty

[mdjastrzebski]

Description

yarn test fails on RN app from nightly template.

Error:

 FAIL  __tests__/App.test.tsx
  ● Test suite failed to run

    SyntaxError: /Users/maciej/Dev/Temp/RnNightly/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js: Unexpected token, expected "]" (39:5)

      37 |
      38 | type Registry<TEventToArgsMap: {...}> = {
    > 39 |   [K in keyof TEventToArgsMap]: Set<Registration<TEventToArgsMap[K]>>,
         |      ^
      40 | };
      41 |
      42 | /**

      18 | } from 'react-native';
      19 |
    > 20 | import {
         | ^
      21 |   Colors,
      22 |   DebugInstructions,
      23 |   Header,

This does not seem to be related to react-test-renderer deprecation but rather to Flow processing in RN repo.

Steps to reproduce

1. Create RN app from 0.76 nightly: npx react-native init RnNightly --version nightly
2. yarn install
3. yarn test fails with reported error.

React Native Version

0.76.0-nightly-20240905-62ee5c9b8

Affected Platforms

Other (please specify)

Output of npx react-native info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 95.78 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.12.0
    path: ~/.nvm/versions/node/v20.12.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.12.0/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v20.12.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/maciej/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "28"
      - "30"
      - "31"
      - "34"
    Build Tools:
      - 30.0.3
      - 34.0.0
    System Images:
      - android-31 | Google Play ARM 64 v8a
      - android-32 | Google Play ARM 64 v8a
      - android-34 | ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/maciej/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 14.0.0-alpha.11
    wanted: 14.0.0-alpha.11
  react:
    installed: 19.0.0-rc-fb9a90fa48-20240614
    wanted: 19.0.0-rc-fb9a90fa48-20240614
  react-native:
    installed: 0.76.0-nightly-20240905-62ee5c9b8
    wanted: nightly
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

SyntaxError: /Users/maciej/Development/OpenSource/Temp/RnNightly/node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js: Unexpected token, expected "]" (39:5)

      37 |
      38 | type Registry<TEventToArgsMap: {...}> = {
    > 39 |   [K in keyof TEventToArgsMap]: Set<Registration<TEventToArgsMap[K]>>,
         |      ^
      40 | };
      41 |
      42 | /**

      18 | } from 'react-native';
      19 |
    > 20 | import {
         | ^
      21 |   Colors,
      22 |   DebugInstructions,
      23 |   Header,

      at constructor (node_modules/@babel/parser/src/parse-error.ts:95:45)
      at FlowParserMixin.toParseError [as raise] (node_modules/@babel/parser/src/tokenizer/index.ts:1496:19)
      at FlowParserMixin.raise [as unexpected] (node_modules/@babel/parser/src/tokenizer/index.ts:1536:16)
      at FlowParserMixin.unexpected [as expect] (node_modules/@babel/parser/src/parser/util.ts:157:12)
      at FlowParserMixin.expect [as flowParseObjectTypeIndexer] (node_modules/@babel/parser/src/plugins/flow/index.ts:1013:12)
      at FlowParserMixin.flowParseObjectTypeIndexer [as flowParseObjectType] (node_modules/@babel/parser/src/plugins/flow/index.ts:1171:20)
      at FlowParserMixin.flowParseObjectType [as flowParsePrimaryType] (node_modules/@babel/parser/src/plugins/flow/index.ts:1561:23)
      at FlowParserMixin.flowParsePrimaryType (node_modules/@babel/parser/src/plugins/flow/index.ts:1754:23)
      at FlowParserMixin.flowParsePostfixType [as flowParsePrefixType] (node_modules/@babel/parser/src/plugins/flow/index.ts:1797:21)
      at FlowParserMixin.flowParsePrefixType [as flowParseAnonFunctionWithoutParens] (node_modules/@babel/parser/src/plugins/flow/index.ts:1802:26)
      at FlowParserMixin.flowParseAnonFunctionWithoutParens [as flowParseIntersectionType] (node_modules/@babel/parser/src/plugins/flow/index.ts:1821:25)
      at FlowParserMixin.flowParseIntersectionType [as flowParseUnionType] (node_modules/@babel/parser/src/plugins/flow/index.ts:1834:25)
      at FlowParserMixin.flowParseUnionType [as flowParseType] (node_modules/@babel/parser/src/plugins/flow/index.ts:1847:25)
      at FlowParserMixin.flowParseType [as flowParseTypeInitialiser] (node_modules/@babel/parser/src/plugins/flow/index.ts:353:25)
      at FlowParserMixin.flowParseTypeInitialiser [as flowParseTypeAlias] (node_modules/@babel/parser/src/plugins/flow/index.ts:818:25)
      at FlowParserMixin.flowParseTypeAlias [as parseExpressionStatement] (node_modules/@babel/parser/src/plugins/flow/index.ts:1994:25)
      at FlowParserMixin.parseExpressionStatement [as parseStatementContent] (node_modules/@babel/parser/src/parser/statement.ts:659:19)
      at FlowParserMixin.parseStatementContent (node_modules/@babel/parser/src/parser/statement.ts:426:17)
      at FlowParserMixin.parseStatementLike (node_modules/@babel/parser/src/plugins/flow/index.ts:1962:26)
      at FlowParserMixin.parseStatementLike [as parseModuleItem] (node_modules/@babel/parser/src/parser/statement.ts:363:17)
      at FlowParserMixin.parseModuleItem [as parseBlockOrModuleBlockBody] (node_modules/@babel/parser/src/parser/statement.ts:1395:16)
      at FlowParserMixin.parseBlockOrModuleBlockBody [as parseBlockBody] (node_modules/@babel/parser/src/parser/statement.ts:1369:10)
      at FlowParserMixin.parseBlockBody [as parseProgram] (node_modules/@babel/parser/src/parser/statement.ts:217:10)
      at FlowParserMixin.parseProgram (node_modules/@babel/parser/src/parser/statement.ts:199:25)
      at FlowParserMixin.parseTopLevel (node_modules/@babel/parser/src/plugins/flow/index.ts:3319:30)
      at FlowParserMixin.parseTopLevel [as parse] (node_modules/@babel/parser/src/parser/index.ts:46:10)
      at parse (node_modules/@babel/parser/src/index.ts:65:38)
      at parser (node_modules/@babel/core/src/parser/index.ts:28:19)
          at parser.next (<anonymous>)
      at normalizeFile (node_modules/@babel/core/src/transformation/normalize-file.ts:50:24)
          at normalizeFile.next (<anonymous>)
      at run (node_modules/@babel/core/src/transformation/index.ts:39:36)
          at run.next (<anonymous>)
      at transform (node_modules/@babel/core/src/transform.ts:29:20)
          at transform.next (<anonymous>)
      at evaluateSync (node_modules/gensync/index.js:251:28)
      at sync (node_modules/gensync/index.js:89:14)
      at fn (node_modules/@babel/core/src/errors/rewrite-stack-trace.ts:99:14)
      at transformSync (node_modules/@babel/core/src/transform.ts:66:52)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:545:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:674:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:726:19)
      at Object.require (node_modules/react-native/Libraries/EventEmitter/RCTDeviceEventEmitter.js:14:1)
      at Object.require (node_modules/react-native/Libraries/Utilities/Dimensions.js:11:1)
      at Object.require (node_modules/react-native/Libraries/Utilities/PixelRatio.js:13:20)
      at Object.require (node_modules/react-native/Libraries/StyleSheet/StyleSheet.js:29:20)
      at Object.require (node_modules/react-native/Libraries/NewAppScreen/components/DebugInstructions.js:13:1)
      at Object.require (node_modules/react-native/Libraries/NewAppScreen/index.js:12:1)
      at Object.require (App.tsx:20:1)
      at Object.require (__tests__/App.test.tsx:7:1)

Reproducer

https://github.com/mdjastrzebski/rn-0.76-nightly-test

Screenshots and Videos

No response

[cipolleschi]

@mdjastrzebski thanks for flagging this!
We identified the root cause in this commit: 464a202

We have to update the Flow syntax Babel plugin used by Jest but this problem should not give issues at runtime.
Also, is a bit weird as we should be using the Hermes parser for Flow in Jest tests, but it looks like we are not? 🤔
@huntie @robhogan has more expertise in this area.

[mdjastrzebski]

@cipolleschi thanks for checking this. I've run into this when I wanted to check how RN 0.76 + React 19 would work with RN Testing Library. I'll wait for a fix and resume my checks afterwards.

[cipolleschi]

I wanted to check how RN 0.76 + React 19

Given that React 19 has not been released as stable yet, we are reverting the React 19 bump.
React native 0.76 will ship with React 18.3.1