Ts-jest: "Jest encountered an unexpected token" with React Native setup

[bySabi]

Issue :

Test suite failed to run. I got a Unexpected token error

Minimal repo :

## Clone repo
> git clone https://github.com/bySabi/react-navigation-hooks
# checkout "not-work-jest" branch
> git checkout not-work-jest
# run test
> yarn && yarn test

babel.config.js

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

jest.config.js

const { defaults: tsjPreset } = require('ts-jest/presets');

module.exports = {
  ...tsjPreset,
  preset: 'react-native',
  transform: {
    ...tsjPreset.transform,
    '\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
  },
  globals: {
    'ts-jest': {
      babelConfig: true,
    },
  },
  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
  cacheDirectory: '.jest/cache',
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6"],
    "jsx": "react-native",
    "sourceMap": true,
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "declaration": true,
    "pretty": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strict": false,
    "outDir": "dist",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "exclude": ["dist", ".jest", "node_modules"]
}

package.json

{
  "name": "react-navigation-hooks",
  "version": "1.0.0-alpha.2",
  "description": "React hooks for convenient react-navigation use",
  "main": "dist/Hooks.js",
  "types": "dist/Hooks.d.ts",
  "files": [
    "dist/",
    "LICENSE.md",
    "README.md"
  ],
  "scripts": {
    "test": "jest",
    "lint": "tslint --project tsconfig.json",
    "build": "tsc --project tsconfig-build.json",
    "prepare": "yarn build",
    "release": "release-it",
    "precommit": "lint-staged"
  },
  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/react-navigation/react-navigation-hooks.git"
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/react-navigation/react-navigation-hooks/issues"
  },
  "homepage": "https://github.com/react-navigation/react-navigation-hooks#readme",
  "dependencies": {
    "@babel/core": "^7.1.6",
    "babel-jest": "^23.6.0"
  },
  "devDependencies": {
    "@react-navigation/core": "bySabi/react-navigation-core#wip",
    "@react-navigation/native": "^3.0.0",
    "@types/jest": "^23.3.9",
    "@types/react": "^16.7.7",
    "@types/react-native": "^0.57.14",
    "@types/react-test-renderer": "^16.0.3",
    "conventional-changelog-cli": "^2.0.5",
    "husky": "^0.14.3",
    "jest": "^23.6.0",
    "lint-staged": "^8.1.0",
    "prettier": "^1.8.2",
    "pretty-quick": "^1.8.0",
    "react": "^16.7.0-alpha.2",
    "react-native": "^0.57.7",
    "react-navigation-types-only": "bySabi/react-navigation#patch-1",
    "react-test-renderer": "^16.7.0-alpha.2",
    "release-it": "^7.6.1",
    "ts-jest": "^23.10.5",
    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.11.1",
    "tslint-config-prettier": "^1.16.0",
    "tslint-react": "^3.6.0",
    "typescript": "^3.1.6"
  },
  "peerDependencies": {
    "@react-navigation/core": "^3.0.0",
    "@react-navigation/native": "^3.0.0",
    "react": "^16.7.0-alpha.2",
    "react-native": "*"
  },
  "lint-staged": {
    "{src}/**/*.ts*": [
      "prettier --write",
      "git add"
    ]
  }
}

ERROR message:

   Jest encountered an unexpected token
      This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
      By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
      Here's what you can do:
       • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
       • If you need a custom transformation specify a "transform" option in your config.
       • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
      You'll find more details and examples of these config options in the docs:
      https://jestjs.io/docs/en/configuration.html
      Details:
        13 | var HomeScreen = function () {
        14 |     var navigate = __1.useNavigation().navigate;
      > 15 |     return <react_native_1.Button title="Go to Details" onPress={function () { return navigate('Details'); }}/>;
           |            ^
        16 | };
        17 | var DetailsScreen = function () { return <react_native_1.View />; };
        18 | var AppNavigator = core_1.createStackNavigator({

I hope is enough. Thanks for time you put on this project.

[bySabi]

I add "babel-core": "^7.0.0-bridge.0" dependency and now I have a different Error:

Details:

    /Users/flx/Dropbox/Projects/react-navigation-hooks/node_modules/react-navigation-stack/dist/index.js:2
    import { Platform } from 'react-native';
           ^

    SyntaxError: Unexpected token {

      17 | const DetailsScreen = () => <View />;
      18 | 
    > 19 | const AppNavigator = createStackNavigator(
         |                      ^
      20 |   {
      21 |     Home: HomeScreen,
      22 |     Details: DetailsScreen,

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.get createStackNavigator [as createStackNavigator] (node_modules/react-navigation/src/react-navigation.js:107:12)
      at Object.<anonymous> (src/__tests__/Hooks-test.tsx:19:22)

[bySabi]

Fixed!, looking at https://github.com/fbartho/ts-jest-rn-minimal settings.

[VanessaChu]

Can you share how it was fixed? @bySabi which part of your file changed?

[bySabi]

Sure @VanessaChu you can take a look at this project: https://github.com/react-navigation/react-navigation-hooks all required settings for: Typescript, Ts-Lint, Ts-jest and React Native is there.

Feel free to ask anything you need.