Ts-jest: Should this work with react native?

[bufke]

I'm using jest and react native. I can test it by manually compiling the typescript into js and running jest on that. Trying to use this project I get

/node_modules/react-native/jest/setup.js:40
      )
      ^
    SyntaxError: Unexpected token )

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at handle (node_modules/worker-farm/lib/child/index.js:41:8)
      at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
      at emitTwo (events.js:106:13)

My relevant package.json

  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "./jest/setup.js"
    ],
    "transform": {
      ".(ts|tsx)": "./node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  }

I've read through the limitations but those don't seem to apply to me, not targeting ES6 ect. Using node v6.9.2

[kulshekhar]

I don't have any experience with react-native so I'm not sure what's going on. Would it be possible for you to create a minimal repo that reproduces this issue?

[bufke]

Example app

I think react native uses babel internally. That lead me into trying this to enable es6. That makes it get further and even can run some tests. However react-test-renderer still doesn't work with this method - making snapshot tests impossible. That's especially annoying because snapshot testing is annoying if you have a build folder that isn't in version control - jest will place all it's snapshot files in the temporary build folder. If I learn anything more I'll post here.

[kulshekhar]

I'm not sure this is related to ts-jest. The error seems to be thrown before ts-jest is even invoked.

[kulshekhar]

The root cause of this issue is the use of trailing commas in function calls in react-native/jest/setup.js (L39 & L188) and in react-native/jest/mockComponent.js (L22).

Trailing commas in function calls aren't natively supported in node yet. Preprocessing such files with babel/typescript takes care of this issue. However, since these files are added as part of a dependency, I'd expect them to be installed in a form that node can understand.

That aside, I have no idea why jest is passing external files to the pre-processor.

[felipemsantana]

I managed to make it work, install these modules:

yarn add -D babel-jest babel-preset-react-native

Create a .babelrc file with this content:

{
  "presets": ["react-native"]
}

And finally in package.json, use this transform:

"transform": {
  "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
  ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
}

[kulshekhar]

@bufke does the solution posted by @fmatoss solve this for you?

[bufke]

@fmatoss where you able to run the home component test from the example repo?

I've found a few solutions that will run non react related tests but nothing that works with react-test-renderer. Either renderer becomes undefined or in the case of your suggestion I get

node_modules/react-native/Libraries/Utilities/throwOnWrongReactAPI.js: Unexpected token, expected , (15:33)
        13 | 'use strict';
        14 | 
      > 15 | function throwOnWrongReactAPI(key: string) {
           |                                  ^
        16 |   throw new Error(
       17 | `Seems you're trying to access 'ReactNative.${key}' from the 'react-native' package. Perhaps you meant to access 'React.${key}' from the 'react' package instead?

I suspect there is some complex babel work being done by react native's tooling that is hard to mimic. If I compile the typescript first and then test it works fine.

[bufke]

Sorry here is the correct error - before I forgot about babelrc. This is consistent with other attempts I made messing with babel.

 FAIL  src/home/__tests__/home.component-test.tsx
  ● renders correctly

    TypeError: Cannot read property 'createElement' of undefined

      at Object.<anonymous>.it (src/home/__tests__/file:/home/david/Projects/lab/ts-jest-rn-example/src/home/__tests__/home.component-test.tsx:11:5)

I updated the repo to show this.

[felipemsantana]

Apply this patch using git apply: https://gist.github.com/fmatoss/34d57f5bc70f64dac6f67a97f5b8b050

I made some small changes, since TypeScript 2.0, using @types scope is the preferred way to include declaration files.

Use "include" instead of "filesGlob".

[bufke]

Cool that works thank you @fmatoss

So I guess the answer to can ts-jest work with react-native is yes but with some changes. As far as I can tell that includes

• Import like this import { create } from "react-test-renderer"; not like import renderer from "react-test-renderer";
• yarn add -D babel-jest babel-preset-react-native
• Ensure .bablerc contains "presets": ["react-native"]
• Ensure package.json contains

"transform": {
  "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
  ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
}

[felipemsantana]

Import like this import { create } from "react-test-renderer"; not like import renderer from "react-test-renderer";

I think this one is not related to ts-jest, react-test-renderer don't have a default export, the same happens to React, but if you want to import the entire module, this will work for you:

 import * as renderer from "react-test-renderer";

[bufke]

@kulshekhar do you any notes about react native added to the readme? Otherwise this can be closed.

[felipemsantana]

@kulshekhar Check my PR https://github.com/kulshekhar/ts-jest/pull/95

[kulshekhar]

closing following #95