Ts-jest: Support for "jsx": "preserve" config

[Igmat]

After issue #58 I've realized that we have no support for this options in config which leads to errors that user can't understand.
Possible solutions:

1. Find a way to activate babel-jest transformer from jest config after ts-jest applied.
2. Inform user that this option is not allowed and use "jsx": "react" instead.
3. Include babel-jest transformer in our package and run it if "jsx": "preserve" is used.

As for me third solution seems to be the worst.
First of all we have to create tests for this case.

[mike-morr]

I would prefer #2. Number 1 is a lot of overhead and adds another source of failure and inconsistency. Especially for source mapping.

[basarat]

2 sounds best to me too 🌹

[JakeGinnivan]

I think it's pretty common, babel transpiles JSX faster than TypeScript does. Also there are a heap of useful JSX plugins for babel. awesome-typescript-loader does similar to option 3 and makes babel an option in it's config.

Also, option 3 is probably easier to control than a config point which can be misconfigured?

btw, this project looks quite promising and will be taking for a spin later tonight :)

[jbrantly]

FWIW I ran into this and I found the information at https://github.com/facebook/jest/issues/1466#issuecomment-269421820 to be very helpful. Seems very easy to manually chain babel-jest after a TS transform. I'm with @JakeGinnivan that this is probably pretty common due to the optimizing JSX plugins that Babel has like react-constant-elements and react-inline-elements

[jbrantly]

BTW, I think this issue is bigger than just JSX. There are a lot of other things that Babel can do beyond just JSX (for instance, the actual implementation side of "allowSyntheticDefaultImports"). I tend to use TypeScript for type-checking and Babel for transpilation for this reason.

Additionally, while I was able to easily chain TypeScript and Babel using a custom preprocessor, I can't quite get code coverage working. So in the case of 1 or 3, some additional work might be needed to make sure code coverage still works. And if anyone has any tips on making that work manually that'd be awesome.

[havenchyk]

that would be nice to reopen this issue

[GeeWee]

This should be possible by using a .babelrc file now I think.

[havenchyk]

@GeeWee could you please shed some light? how is it possible?

[GeeWee]

Sure, if you set tsconfig to preserve, set the useBabelRc flag to true, and have a .babelrc file in the project(https://github.com/kulshekhar/ts-jest#using-babelrc), you should be able to do additional processing of the files.

[kelly-tock]

I can't seem to get a react element test to work with ts-jest, and tsconfig: preserve. I reproduced the test using https://github.com/wmonk/create-react-app-typescript, so I know my test is ok.

TypeScript compiler encountered syntax errors while transpiling. Errors: '>' expected.,Unterminated regular expression literal.,',' expected.,')' expected.

I tried setting it to react in jsx, still same message.

my transforms:

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

any ideas what that message means?

non react tests work like a charm thus far.

[stephenotalora]

I'm having the same issue non react tests work as expected, however all react tests fail with the same issue. I have tried to set my tsconfig.json to all jsx enum options and I still fail to get jest to run with jsx. 😭 any help on this would be highly appreciated.

it looks like is trying to get into node_modules despite me explicitly setting tsconfig to exclude this directory. BTW I have tried both manual jest.config.js as well as jest.preset set to ts-jest and I always seem to run into the same issue.

Error when jsx is set to react

yarn test
yarn run v1.9.4
$ jest
 FAIL  packages/common/tests/components/Container.test.tsx
  ● Test suite failed to run

    /personal-projects/beluga-apps/node_modules/react-native/Libraries/StyleSheet/StyleSheet.js:18
    import type {
           ^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.get StyleSheet [as StyleSheet] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:255:12)
      at Object.<anonymous> (node_modules/styled-components/native/dist/styled-components.native.cjs.js:6478:44)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.654s

error when jsx is set to react-native or preserve

 component: enzyme_1.shallow(<Container_1.default {...props}/>)
                                    ^

    SyntaxError: Unexpected token <

input on this would be much appreciated. Thanks!