[Bug]: Jest setup with React native cannot use import statement outside of a module

[ethan-krich]

Version

30.0

Steps to reproduce

1. pnpm install
2. cd packages/ui
3. pnpm test

Running this code will get a different error which is not Jest's fault. To fix it open /jest-repo/node_modules/.pnpm/@react-native+js-polyfills@0.79.2/node_modules/@react-native/js-polyfills/error-guard.js and remove all flow types. Then rerun the test command.

Expected behavior

I expect my tests to pass.

Actual behavior

The test fails with a long error. Here is the important part:

    <monorepoRoot>/node_modules/.pnpm/react-native@0.79.2_@babel+core@7.27.1_@types+react@19.0.14_react@19.0.0/node_modules/react-native/index.js:28
    
    import typeof * as ReactNativePublicAPI from './index.js.flow';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import {describe, it, expect} from "@jest/globals";
    > 2 | import {render} from "@testing-library/react-native";
        | ^
      3 | import Button from "./Button.tsx";
      4 | import React from "react";
      5 |

Additional context

I have tried a lot to fix this error and feel like I have hit wall this. Here is everything:

• I have tried creating my config from scratch with the jest cli
• Using the react-native preset
• Using the jsWithBabelPreset transform
• Using ts-jest with transforms
• Using ts-jest config helper, see [here][2]
• Using module file extensions
• Using babel instead and in addition to ts-jest
• Using babel's module:metro-react-native-babel-preset
• Using babel-plugin-strip-flow-types
• Using babel/plugin-transform-modules-commonjs
• Using experimental-vm-modules
• Transforming all of node_modules which only led to new errors

Here is my current config files:

babel.config.js

/** @type {import('@babel/core').ConfigFunction} */
export default {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    "@babel/plugin-transform-flow-strip-types",
    "@babel/plugin-transform-modules-commonjs",
  ],
};

jest.config.ts

import type {Config} from "jest";
import {createJsWithBabelPreset} from "ts-jest";

const jsWithBabelPreset = createJsWithBabelPreset({
  tsconfig: "tsconfig.json",
  babelConfig: true,
});

const jestConfig: Config = {
  preset: "react-native",
  transform: jsWithBabelPreset.transform,
  transformIgnorePatterns: [
    "/node_modules/(?!(@react-native|react-native)/).*/",
  ],
  moduleFileExtensions: ["ts", "tsx", "js", "flow"],
};

export default jestConfig;

tsconfig.json

{
  "extends": "../typescript-config/react-library.json",
  "compilerOptions": {
    "jsx": "react",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ESNext",
    "esModuleInterop": true,
    "allowImportingTsExtensions": true,
    "allowJs": true
  }
}

tsconfig.json (base)

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}

Test command

node --experimental-vm-modules node_modules/jest/bin/jest.js

I suspect the issue is with React native shipping flow code into the bundle but I do not know how to fix it. Here are my Jest related dependencies:

    "@testing-library/react-native": "^12.9.0",
    "babel-jest": "^30.0.1",
    "jest": "^30.0.0",
    "metro-react-native-babel-preset": "^0.77.0",
    "ts-jest": "^29.4.0",
    "@babel/core": "catalog:",
    "@babel/plugin-transform-flow-strip-types": "^7.27.1",
    "@babel/plugin-transform-private-methods": "^7.27.1",
    "@babel/plugin-transform-private-property-in-object": "^7.27.1",
    "@babel/plugin-transform-react-jsx": "^7.27.1",
    "@babel/preset-env": "^7.27.2",
    "@babel/preset-react": "^7.27.1",
    "@jest/globals": "^30.0.0",

P.S. I have already had to patch a react native package shipping flow code in a .js extension.

Environment

System:
    OS: macOS 15.5
    CPU: (12) arm64 Apple M2 Max
  Binaries:
    Node: 23.4.0 - ~/.nvm/versions/node/v23.4.0/bin/node
    npm: 11.4.2 - ~/.nvm/versions/node/v23.4.0/bin/npm
    pnpm: 9.0.0 - ~/Library/pnpm/pnpm
    bun: 1.1.26 - ~/.bun/bin/bun

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[JesusERG]

Hi
Try installing and configuring the following babel plugin

Babel Plugin
npm install --save-dev babel-jest babel-plugin-transform-flow-strip-types

.babelrc or babel.config.js

{
  "plugins": ["transform-flow-strip-types"]
}

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.