Ts-jest: react-native flow types breaking things

[duro]

• Issue

Here is my jest config in package.json:

  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest",
      "^.+\\.(ts|tsx)?$": "ts-jest",
      "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$": "<rootDir>/node_modules/react-native/jest/assetFileTransformer.js"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|glamorous-native)"
    ],
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "globals": {
      "ts-jest": {
        "babelConfig": {
          "presets": ["react-native"],
          "sourceMaps": "inline"
        }
      }
    }
  },

But when I run tests, I keep getting this error:

  ● Test suite failed to run

    /Users/adamduro/Workspace/projects/freebird/FreebirdNative/node_modules/react-native/Libraries/StyleSheet/normalizeColor.js: Unexpected token, expected , (13:29)
        11 | 'use strict';
        12 |
      > 13 | function normalizeColor(color: string | number): ?number {
           |                              ^
        14 |   var match;
        15 |
        16 |   if (typeof color === 'number') {

It would appear that the flow types from react-native are coming into ts-jest, and since they are .js files, it's causing the ts transformer to bork.

Any ideas on how to get my jest/ts/babel setup working with this?

[duro]

The fix for this was to stop using the jest.globals.ts-jest.babelConfig config, and use an actual .babelrc

[benjaminbillet]

Hi,

I have a similar problem with ts-jest 22.4.6 and react-native 0.55.3.

ts-jest tries to transpile some JS files in node_modules/react-native/Libraries (despite my tsconfig.json exclude directives, probably because I use react-native dependencies). These files contain flow annotations that are altered by ts-jest when it runs the typescript transpiler on it.

I read the code of preprocessor.js, and it runs transpiler_1.transpileTypescript on the source files, which messes with flow annotations, e.g.:

): ReactPropsCheckType & ReactPropsChainableTypeChecker;

becomes

), ReactPropsCheckType;
 & ReactPropsChainableTypeChecker;
;

Because babel is only applied in postprocessor.js, I can't configure the .babelrc with the transform-flow-strip-types preset (the preset does not strip anything, given that the flow annotations are altered by the typescript transpiler).

Is there a solution to this problem? Or am I doing something wrong?