Jest transform support / documentation

[aeirola]

Hi, thanks for the awesome library. Nice to see proper TypeScript support in React Native.

As Jest is the default test runner in React Native projects created by by the react-native cli tool, it would be nice to see support or documentation on how to use this library as the transformer for Jest as well.

Of course the alternative is to use https://github.com/lozinsky/typescript-babel-jest, but would somehow be nice to use the same transformation for tests and production.

[ds300]

Hey Axel :-)

I'd recommend using ts-jest. It is more mature than lozinsky/typescript-babel-jest.

It makes sense to use react-native-typescript-transformer with Jest to get the consistency between test and bundle code. Although I haven't run into any issues with ts-jest + the react-native Jest preset.

Here's my Jest config for reference:

{
  "jest": {
    "preset": "react-native",
    "moduleDirectories": [
      "node_modules",
      "<rootDir>" // for absolute imports
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|glamorous-native|react-native-global-props|react-native-elements|react-native-vector-icons|react-native-side-menu|react-native-tab-navigator|react-native-animatable|react-navigation)/)"
    ],
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  },
}

I'd be open to figuring out how to do this, but ts-jest solves a lot of problems that I don't fancy solving again, so maybe it should be in collaboration with that project?

[GeeWee]

I help maintain ts-jest, and I'd love to keep these projects in sync somehow. (Love what you're doing here btw @ds300)

[ds300]

Hey @GeeWee That would would be awesome. Any ideas about how this could be done? It has been a long while since I looked at the ts-jest code.

[GeeWee]

I'm not actually sure what needs to be done, ts-jest supports running things through Babel (with or without a babelrc) as a secondary transpilation step. (I think you added that originally) - does this transformer do any extra magic that'll cause the two projects to be incompatible?

[aminroosta]

Edited: My issue was related to ts-jest, opened an issue #322 there.

[GeeWee]

I would open a new issue in ts-jest :)

[vovkasm]

I just try preprocess jest tests with this module and it seems to work well with small glue code. Although my test suite is small and I may not detect all edge cases, it would be good to have this "glue" in package itself and improve it together.

My config: jest/preprocessor.js (actually it is adaptation of RN jest preprocessor)

var tsTransformer = require('react-native-typescript-transformer')
var rnTransformer = require('react-native/jest/preprocessor')

var preprocessor = Object.assign({}, rnTransformer, {
  process (src, file) {
    return tsTransformer.transform({
      filename: file,
      localPath: file,
      options: {
        dev: true,
        inlineRequires: true,
        platform: '',
        projectRoot: '',
        retainLines: true,
      },
      src,
    }).code
  },
})

module.exports = preprocessor

package.json (jest config part)

  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.[jt]sx?$": "<rootDir>/jest/preprocessor.js"
    },
    "testMatch": [
      "**/*.spec.{js,jsx,ts,tsx}"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
  },

What do you think?

[ds300]

@vovkasm This is cool! Thanks for sharing :)

I still haven't heard of anyone having problems with ts-jest (specifically caused by differences between it's transformer and react-native-typescript-transformer), and it solves a lot of edge cases, so I'm hesitant to put this in the package itself. But I'll gladly mention your solution in the README for other people who want to use exactly the same transformer in both places.

[vovkasm]

No problems with ts-jest, except hard to track deps. react-native-typescript-transformer requires math fewer other modules. :)

[maraujop]

Hi there,

Today i was suffering an issue in my tests, that I finally solved from using the previous gist and moving away of ts-jest. In my case it looked like in some reducers, some local variables weren't initialized where due and code would break in weird ways. I have tried for a while to isolate into a simpler test case without luck, I think some circular dependencies might be part of the problem.

Anyway, I just wanted to state that I've had problems and solved them with this.

Thanks

[GeeWee]

If you manage to produce a working repo I'd love to see it in ts-jest. Community-wise I still think it'd be optimal to focus the brunt on the resources inside ts-jest rather than having one solution for react and one for react native. (Let me know if you think it's annoying that I chime in on this issue @ds300 , I'll gladly stop)

[ds300]

Happy to have your input @GeeWee !

I agree that it makes most sense to focus on ts-jest. It should work, and it has a lot of useful things that react-native-typescript-transformer lacks.

[aMarCruz]

@vovkasm your setup is not working for me. I have errors like this:

 FAIL  ~js/app/lib/__tests__/formatPhone.spec.js
  ● Test suite failed to run

    TypeError: Jest: a transform's `process` function must return a string, or an object with `code` key containing this string.
      
      at ScriptTransformer.transformSource (node_modules/jest-untime/build/script_transformer.js:238:15)

RN: 0.52.2 react-native-typescript-transformer: 1.2.3 Jest: 22.1.4 OS: Linux Mint 18.3

[vovkasm]

@aMarCruz: too new version of jest ))) it changed api for transformers, more info here: https://github.com/ds300/react-native-typescript-transformer/issues/39#issuecomment-356764981