Jest react native SyntaxError: Unexpected identifier when using pnpm package installer

[1mehdifaraji]

Description

Jest tests runs successfully after installing the dependencies using npm install but fails after using pnpm install .

Full error message :

/node_modules/.pnpm/@[email protected]/node_modules/@react-native/polyfills/error-guard.js:14
    type ErrorHandler = (error: mixed, isFatal: boolean) => void;
         ^^^^^^^^^^^^
    SyntaxError: Unexpected identifier

Project structure :

package.json :

{
  "name": "MyApp",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "^0.71.5"
  },
  "devDependencies": {
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "jest": "^29.2.1",
    "react-test-renderer": "18.2.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

babel.config.js :

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
};

app.test.js :

import App from "../App";
import renderer from "react-test-renderer";

it("renders correctly", () => {
  renderer.create(<App />);
  expect(1).toEqual(1);
});

React Native Version

0.71.5

Output of npx react-native info

System:
    OS: macOS 13.1
    CPU: (8) x64 Apple M1
    Memory: 39.25 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: Not Found
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /Users/mehdi/.rvm/rubies/ruby-2.7.6/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0
      System Images: android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^18.2.0 => 18.2.0 
    react-native: ^0.71.5 => 0.71.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

pnpm install

pnpm run test

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

Stackoverflow

[cortinico]

Jest tests runs successfully after installing the dependencies using npm install but fails after using pnpm install .

Just a heads up that we don't fully support pnpm. This is due to Metro limitations with symlink support. We're looking into it so hopefully we will be able to relax this requirement soon

[github-actions]

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.

[waganse]

@1mehdifaraji
Please try this on your package.json.
https://docs.expo.dev/develop/unit-testing/

  "jest": {
    ...
    "transformIgnorePatterns": [
      "node_modules/(?!(?:.pnpm/)?((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))"
    ]
  },

[jzaefferer]

This looks like a very similar issue to #33426 - both swc/jest and pnpm struggle/fail with the flow file pretending to be js.

It's weird that https://github.com/facebook/react-native/blob/main/packages/polyfills/error-guard.js has flow type annotations, while it's sibling https://github.com/facebook/react-native/blob/main/packages/polyfills/console.js has none.

Would it be an option to remove the flow types from polyfills/error-guard.js?

Probably not by itself, since other files import types from this polyfill:

react-native/Libraries/vendor/core/ErrorUtils.js

import type {ErrorUtilsT} from '@react-native/js-polyfills/error-guard';

Importing anything from a polyfill(?) seems pretty strange.

[byCedric]

@waganse I don't think the change is a correct change. The paths aren't matching the right format, and changing it to that is basically the same as setting transformIgnorePatterns: [] (which also works btw - just a bit heavier, as it transpiles everything).

The pattern that pnpm (and npm) use for node_modules is roughly this:

pnpm: <root>/node_modules/.pnpm/<isolation-context>/node_modules/<module>
npm: <root>/node_modules/.store/<isolation-context>/node_modules/<module>

• <module> is just the module name, which is what this pattern should match on.
• <isolation-context> can be a single module, or group of modules (not sure how this is calculated). E.g.
  • [email protected]
  • @[email protected]
  • [email protected]_@[email protected]_@[email protected] (copied from a test project)

We must filter out the "starting" node_modules/(?:\.pnpm|\.store)/<isolation-context> part from the current pattern. If we can match this before the original pattern matches, I think that should work. But no idea yet how we can do this.

Maybe something like this could work, but haven't tested it:

(?:node_modules/(?:\.pnpm|\.store)/[^/]+)?/node_modules/(?!((jest-)?react-native|@react-native(-community)?)/)

[github-actions]

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]

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