bug: `@react-native/polyfills/error-guard.js` not transpiled in distrobution

[therynamo]

Description

In trying to integrate @swc/jest into our React Native codebase - it was discovered that one of the files (error-guard) was not being transpiled correctly. I'm not sure if this is by design or not - but the sibling files do not have types. So my guess is that this is not intended.

Version

0.66.1

Output of npx react-native info

System:
    OS: macOS 12.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 38.22 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /Users/theryn.groetken/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 6.1.0 => 6.1.0
    react: 17.0.2 => 17.0.2
    react-native: 0.66.1 => 0.66.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

See https://github.com/therynamo/SWCJestRepro#swcjestrepro

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

https://github.com/therynamo/SWCJestRepro

[kopax-polyconseil]

Is it possible to have an update on this? Our repository suffer with jest and supporting @swc/jest for testing would be really cool.

[aike19115]

It's also preventing our codebase to work properly when using Jest for unit testing. It looks unintentional because there is typescript code in a .js file which is a big no go

[emclab]

I am having the same issue. https://stackoverflow.com/questions/73493430/how-to-make-jest-ignore-type-which-is-not-js-keyword-and-used-in-react-native

[emclab]

Is there any fix for the issue? I can not run any test.

[mikemeyer30]

I am also encountering this problem..

RN Version 0.65.2

npx react-native info:

    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 92.84 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.4 - /opt/homebrew/bin/npm
    Watchman: 2022.08.08.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 23, 25, 29, 30, 31, 33
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 31.0.0
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8139111
    Xcode: 14.0/14A309 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_322 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: ^0.65.2 => 0.65.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

jest.config.js:

module.exports = {
  // Automatically clear mock calls, instances, contexts and results before every test
  clearMocks: true,

  // Indicates whether the coverage information should be collected while executing the test
  collectCoverage: true,

  // The directory where Jest should output its coverage files
  coverageDirectory: 'coverage',

  // A preset that is used as a base for Jest's configuration
  preset: 'jest-expo',

  // The paths to modules that run some code to configure or set up the testing environment before each test
  setupFiles: ['<rootDir>/mocks/mockLibs.js'],

  // The glob patterns Jest uses to detect test files
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)'],

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  transformIgnorePatterns: [
    'node_modules/(?!@react-native|react-native)',
    'node_modules/(?!@react-native/polyfills/)',
    'node_modules/(?!(jest-)?@react-navigation|@react-native-community|@react-navigation-redux-helpers)',
    'node_modules/(?!(jest-runtime))',
  ],
};

babel.config.js:

module.exports = {
  presets: [
    '@babel/preset-react',
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

If anyone knows of any work arounds, will gladly give you the stronger of my two kidneys

[CoSNaYe]

not working too 😔 I've tried all methods mentioned here

Here's the repo which is just a new RN project. If possible, please someone to help. Thanks!

    "react": "18.1.0",
    "react-native": "0.70.1"
    "@babel/core": "^7.19.3",
    "@testing-library/jest-native": "^5.0.0",
    "@testing-library/react-native": "^11.2.0",
    "@types/jest": "^29.1.1",
    "babel-jest": "^29.1.2",
    "babel-preset-expo": "^9.2.0",
    "detox": "^19.12.5",
    "jest": "^29.1.2",
    "metro-react-native-babel-preset": "^0.72.1",
    "ts-jest": "^29.0.3",
    "typescript": "^4.8.4"

[nzcodarnoc]

I'm in the process of upgrading from 0.67.4 to 0.70.1 and I'm blocked by this presently. I watch this thread with interest, and, I'll report back anything that gets the tests working again.

[nzcodarnoc]

In my case I had to rename all instances of .babelrc with babel.config.js and run the tests with the --clear-cache flag.

The additional code in polyfills/error-guard.js is not Typescript, it is flow (flow is what FB uses instead of Typescript).

So I added this module to strip of the flow annotations in the file. yarn add -D @babel/plugin-transform-flow-strip-types and then added it to the presets array in babel.config.js like this:

// ...
const plugins = [
  "@babel/plugin-transform-flow-strip-types",
// ...

In the end my working jest.config.js is:

export default {
  preset: "react-native",
  globalSetup: "<rootDir>/global-test-setup.js",
  setupFilesAfterEnv: ["<rootDir>/test-setup.ts"],
  moduleNameMapper: {
    ".png": "<rootDir>/../../jest/fileMock",
    "react-native-url-polyfill/auto": "<rootDor>/../../jest/fileMock",
  },
  setupFiles: [
    "<rootDir>/node_modules/react-native-gesture-handler/jestSetup.js",
    "./jest-cucumber-config",
  ],
  transform: {
    "^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$": require.resolve(
      "react-native/jest/assetFileTransformer.js"
    ),
  },
  transformIgnorePatterns: [
    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
  ],
  globals: {
    "ts-jest": {
      isolatedModules: true,
    },
  },
};

[supmanyu]

@nzcodarnoc tried your solution by converting it for a js based project, unfortunately it did not work. Is there a definite root cause for this error or is this something that can only be resolved through hit and trial?

[chemdrew]

Ran into this issue as well when trying to use @swc/jest to get away from some memory issues (https://github.com/facebook/jest/pull/12205).

Unfortunately this issue does not just affect @react-native/polyfills/error-guard.js but also react-native. I found this out attempting to use patch-package to remove any flow syntax on the error-guard polyfill and I gave up there when it turned into a game of whack-a-mole.

[latobibor]

transformIgnorePatterns: [ "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.|@expo-google-fonts/.|react-navigation|@react-navigation/.|@unimodules/.|unimodules|sentry-expo|native-base|react-native-svg)" ],

☝️ This line alone solved the problem for me.

[jzaefferer]

Unfortunately this issue does not just affect @react-native/polyfills/error-guard.js but also react-native. I found this out attempting to use patch-package to remove any flow syntax on the error-guard polyfill and I gave up there when it turned into a game of whack-a-mole.

Since I just tried that, too: After error-guard.js it's node_modules/react-native/Libraries/vendor/core/ErrorUtils.js, then comes node_modules/react-native/index.js

I guess this works fine when using babel thanks to node_modules/metro-react-native-babel-preset/src/configs/main.js including @babel/plugin-syntax-flow.

I wonder if it would be an option to ship npm packages without flow types, to remove the need for flow transform in each project and making swc/jest an option.

[github-actions[bot]]

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

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.