Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error with jest #3

Closed
ivanguimam opened this issue Oct 15, 2019 · 3 comments · Fixed by #4
Closed

Error with jest #3

ivanguimam opened this issue Oct 15, 2019 · 3 comments · Fixed by #4
Assignees
Labels
bug Something isn't working duplicate This issue or pull request already exists

Comments

@ivanguimam
Copy link

SyntaxError: /Users/devatomic/Desktop/atomicagro/app/node_modules/react-native/Libraries/polyfills/error-guard.js: Unexpected token, expected "," (51:22)

      49 |     _globalHandler && _globalHandler(error, true);
      50 |   },
    > 51 |   applyWithGuard<TArgs: $ReadOnlyArray<mixed>, TOut>(
         |                       ^
      52 |     fun: Fn<TArgs, TOut>,
      53 |     context?: ?mixed,
      54 |     args?: ?TArgs,

      at Object.raise (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6400:17)
      at Object.unexpected (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7728:16)
      at Object.expect (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7714:28)
      at Object.tsParseDelimitedListWorker (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4030:14)
      at Object.tsParseDelimitedList (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4002:25)
      at Object.tsParseBracketedList (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4048:25)
      at Object.tsParseTypeParameters (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4156:24)
      at Object.tsTryParseTypeParameters (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4143:19)
      at Object.parseObjPropValue (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5557:33)
      at Object.parseObjectMember (node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9329:10)

Package.json

{
  "androidVersionCode": 120,
  "iosVersionCode": "58",
  "name": "app",
  "version": "3.4.0",
  "private": true,
  "scripts": {
    "android": "adb reverse tcp:9090 tcp:9090 && yarn react-native run-android",
    "android:clean": "yarn clearAndroid && yarn && yarn android",
    "androidBundle": "cd android && ./gradlew bundleRelease",
    "androidBundle:clean": "yarn clearAndroid && yarn && yarn androidBundle",
    "androidRelease": "cd android && ./gradlew assembleRelease",
    "androidRelease:clean": "yarn clearAndroid && yarn && yarn androidRelease",
    "clearAndroid": "rm -rf node_modules/ android/build android/app/build/ android/.gradle/",
    "clearIOS": "rm -rf node_modules/ ios/Pods/ ios/Podfile.lock",
    "compile-mock": "./node_modules/.bin/tsc -p mock-server/tsconfig.json",
    "ios": "./node_modules/.bin/react-native run-ios",
    "ios:clean": "yarn clearIOS && yarn && cd ios && pod install && cd ..",
    "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx,js,jsx}' 'index.js'",
    "mock-serve": "rm -rf out-tsc/mock-server && yarn compile-mock && node mock-server/dyson.js",
    "prettier": "prettier --write {app,src}/**/*.tsx {app,src}/**/*.ts {app,src}/**/*.jsx {app,src}/**/*.js {app,__mocks__}/**/*.ts {app,mock-server}/**/*.ts index.js test.js",
    "postinstall": "npx jetify",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest --detectOpenHandles"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/netinfo": "^4.4.0",
    "@react-native-firebase/analytics": "^6.0.0",
    "@react-native-firebase/app": "^6.0.0",
    "@react-native-firebase/crashlytics": "^6.0.0",
    "axios": "^0.18.0",
    "eventemitter3": "^3.1.2",
    "formik": "^1.3.2",
    "immutable": "^4.0.0-rc.12",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "react": "16.9.0",
    "react-native": "0.61.1",
    "react-native-action-button": "^2.8.5",
    "react-native-auto-height-image": "^1.0.5",
    "react-native-bottom-action-sheet": "^1.0.2",
    "react-native-camera": "3.6.0",
    "react-native-circular-progress": "^1.0.1",
    "react-native-color-matrix-image-filters": "5.2.0",
    "react-native-config": "^0.11.5",
    "react-native-counter": "git+https://github.com/JEGardner/react-native-counter#a444b60bad6af928372056b456a6d4e15969b64d",
    "react-native-device-info": "^0.24.3",
    "react-native-dropdownalert": "^3.7.1",
    "react-native-fbsdk": "1.0.4",
    "react-native-image-crop-picker": "^0.25.2",
    "react-native-image-header-scroll-view": "^0.10.1",
    "react-native-image-progress": "^1.1.1",
    "react-native-iphone-x-helper": "^1.2.1",
    "react-native-keyboard-aware-scroll-view": "0.9.1",
    "react-native-masked-text": "^1.9.2",
    "react-native-modal-dropdown": "0.7.0",
    "react-native-navigation": "3.2.0",
    "react-native-onesignal": "3.4.1",
    "react-native-scrollable-tab-view": "https://github.com/jayshooo/react-native-scrollable-tab-view.git#6ac253a078c71b0cf143f3f8bd75aee7b4ddde58",
    "react-native-status-bar-height": "^2.3.1",
    "react-native-svg": "^8.0.8",
    "react-native-video": "5.0.2",
    "react-native-webview": "^7.2.5",
    "react-redux": "^5.1.1",
    "redux": "4.0.1",
    "redux-axios-middleware": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "reduxsauce": "^1.1.0",
    "slugify": "^1.3.4",
    "typesafe-actions": "^4.4.2",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "@types/dotenv": "^6.1.0",
    "@types/enzyme": "^3.1.15",
    "@types/enzyme-adapter-react-16": "^1.0.3",
    "@types/faker": "^4.1.5",
    "@types/jest": "^24.0.18",
    "@types/lodash": "^4.14.119",
    "@types/node": "^11.9.4",
    "@types/numeral": "^0.0.25",
    "@types/react": "^16.7.4",
    "@types/react-native": "^0.60.16",
    "@types/react-native-modal-dropdown": "0.6.1",
    "@types/react-native-scrollable-tab-view": "^0.8.5",
    "@types/react-native-video": "^3.1.5",
    "@types/react-redux": "^6.0.9",
    "@types/react-test-renderer": "^16.9.0",
    "@types/redux-mock-store": "^1.0.0",
    "@types/sinon": "^5.0.7",
    "@types/yup": "^0.26.2",
    "axios-mock-adapter": "^1.15.0",
    "babel-jest": "24.9.0",
    "babel-plugin-const-enum": "^0.0.2",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "dotenv": "^6.2.0",
    "dyson": "^2.0.3",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
    "faker": "^4.1.0",
    "jest": "24.9.0",
    "jest-enzyme": "^7.0.1",
    "jest-fetch-mock": "^1.7.4",
    "jetifier": "^1.6.4",
    "jsdom": "^13.0.0",
    "metro-react-native-babel-preset": "0.56.0",
    "plist": "^3.0.1",
    "prettier": "^1.15.2",
    "react-devtools": "^3.4.3",
    "react-dom": "^16.6.3",
    "react-native-cli": "^2.0.1",
    "react-native-mock": "^0.3.1",
    "react-native-typescript-transformer": "^1.2.10",
    "react-test-renderer": "16.9.0",
    "reactotron-react-native": "4.0.2",
    "redux-mock-store": "^1.5.3",
    "sinon": "^7.1.1",
    "ts-jest": "^23.10.4",
    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.11.0",
    "tslint-config-prettier": "^1.17.0",
    "typescript": "^3.1.6",
    "typescript-eslint-parser": "^20.1.1"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
      "^.+\\.tsx?$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-native-color-matrix-image-filters|rn-color-matrices|concat-color-matrices)"
    ],
    "globals": {
      "ts-jest": {
        "diagnostics": false,
        "tsConfig": "./tsconfig.jest.json"
      }
    },
    "testMatch": [
      "<rootDir>/src/**/test.(ts|tsx)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "modulePaths": [
      "<rootDir>/src"
    ],
    "setupFilesAfterEnv": [
      "./test.js"
    ]
  },
  "rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  }
}

babel.config.js

module.exports = {
  env: {
    production: {
      plugins: ['transform-remove-console'],
    },
  },
  plugins: ['const-enum'],
  presets: ['module:metro-react-native-babel-preset'],
}
@dosentmatter
Copy link
Owner

dosentmatter commented Oct 16, 2019

@ivanguimam
You have your jest config in your package.json Looks like you are using babel through the react-native preprocessor "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",. I guess the react-native preprocessor runs babel?

And you transpile TS using ts-jest "^.+\\.tsx?$": "ts-jest". You aren't using the babelConfig option described in ts-jest docs:

The option is babelConfig and it works pretty much as the tsConfig option, except that it is disabled by default. Here is the possible values it can take:

false: the default, disables the use of Babel
true: enables Babel processing. ts-jest will try to find a .babelrc, .babelrc.js file or a babel section in the package.json file of your project and use it as the config to pass to babel-jest processor.
{ ... }: inline Babel options. You can also set this to an empty object ({}) so that the default Babel config file is not used.

If my assumptions are correct, how do you expect babel-plugin-const-enum to work? babel-plugin-const-enum works when you use babel to compile TS code. However, it seems like you are using ts-jest, which uses the typescript compiler to compile TS. typescript compiler already has support for const-enum.
You seem to be using babel (throught react-native preprocessor) to compile JS. JS won't have any const enums since they are only a TS feature.


Also, in your SyntaxError, is babel transpiling node_modules? It seems to be saying that @babel/parser has a SyntaxError transpiling node_modules/react-native/Libraries/polyfills/error-guard.js, which is code inside node_modules. A babel.config.js can be used to transpile node_modules:

You want to compile node_modules?
babel.config.js is for you!

Maybe because you have:

    "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-native-color-matrix-image-filters|rn-color-matrices|concat-color-matrices)"
    ],

Which would not ignore node_modules/react-native. Not sure why you want to transpile react-native code.


A minimal reproducible example would be helpful. I have used react and jest but haven't used react-native. Also, maybe an explanation of what you think this plugin is supposed to do. Because you seem to be using this plugin to transpile JS when it should be used to compile TS.

@dosentmatter
Copy link
Owner

@ivanguimam, please see #2 (comment) and see if the suggested babel.config.js with overrides fixes your problem. If it does, let me know so I can close this issue.

dosentmatter pushed a commit that referenced this issue Oct 23, 2019
dosentmatter added a commit that referenced this issue Oct 23, 2019
@dosentmatter
Copy link
Owner

@dosentmatter dosentmatter self-assigned this Apr 15, 2020
@dosentmatter dosentmatter added bug Something isn't working duplicate This issue or pull request already exists labels Apr 15, 2020
@dosentmatter dosentmatter linked a pull request Apr 15, 2020 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working duplicate This issue or pull request already exists
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants