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 jestjs/jest#1466 (comment) 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!

[dimpu]

Any update on this ? I have same issue.

[Ethaan]

NextJS moves preserve when building, and i can't find a way to fix this

[roeniss]

@kulshekhar Can we open this issue again?

As @Ethaan mentioned, when I execute yarn analyze, NextJS forcefully change my jsx settings from react to preserve.

The following mandatory changes were made to your tsconfig.json:

        - jsx was set to preserve (next.js implements its own optimized jsx transform)

and I only succeed Jest tests when that option is set to react as same as @stephenotalora :

❯❯❯ yarn test
yarn run v1.22.10
$ node --experimental-vm-modules node_modules/.bin/jest
(node:17067) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  tests/home.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/roeniss/workspace/Relay-Homepage/client/tests/home.test.tsx:10
        react_test_renderer_1.default.create(<pages_1.default />);
                                             ^

    SyntaxError: Unexpected token '<'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14)

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

when I set jsx option to react, everything is fine.

[ahnpnl]

would you pls provide a repo to check the issue?

[roeniss]

@ahnpnl First, I announced that I solved this issue using tsconfig.test.json. original source but as you can imagine I'm not sure if this is a good way to solve it.

BTW this is my code.

[ahnpnl]

ts-jest only compiles ts to js based on the tsconfig provided which is equivalent to running tsc.

If not provided via tsconfig option, default ts-jest will fall back to tsconfig.json. Your solution is correct because that is the recommended way to do. You should always have separate tsconfig for normal codes and for Jest codes.

[quanru]

that would be nice to reopen this issue