Ts-jest: How to use with target="es6"?

[dziamid]

I use https://github.com/s-panferov/awesome-typescript-loader instead of ts-loader, which speeds up compilation.
My current tsconfig.json is:

{
  "compilerOptions": {
    "noEmit": true,
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "preserve",
    "lib": ["dom","es5","es6","es7","es2017.object"]
  },
  "filesGlob": [
    "./**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "build"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "forkChecker": true,
    "useCache": false
  }
}

And my jest config is:

  "jest": {
    "collectCoverageFrom": [
      "app/**/*.{js,jsx}",
      "!app/app.js",
      "!app/routes.js"
    ],
    "moduleDirectories": [
      "node_modules",
      "<rootDir>/app"
    ],
    "moduleNameMapper": {
      ".*\\.css$": "<rootDir>/mocks/cssModule.js",
      ".*\\.jpg$": "<rootDir>/mocks/image.js",
      ".*\\.svg$": "<rootDir>/mocks/svg.js"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/internals/testing/test-bundler.js",
    "testRegex": "tests/.*\\.test\\.(ts|tsx|js)$",
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  }

So my tests obviously fail with SyntaxError: Unexpected token import.
How to handle this setup with ts-jest?

node: v.6.6.0
typescript: 2.0.8
ts-jest: 17.0.0

[Igmat]

What version of node you are using? And why do you use "jsx": "preserve"?

[dziamid]

@Igmat, sorry, forgot to mention, updated the question. By setting jsx=preserve i tell typescript to not handle jsx transpilation and let babel do the job. For some reason it works faster than letting typescript transpile it all into es2015.

[Igmat]

It's strange that it shows Unexpected token import error.
Could you please share a repro? I have some thoughts but have to check them first.

[dziamid]

@Igmat here you go https://github.com/dziamid/react-typescript-boilerplate

[dziamid]

@Igmat did you have a change to have a look at my repro? Just in case: npm install & npm test to reproduce the proplem - it should fail on the first test with Unexpected token import error.

[Igmat]

@dziamid, sorry, I was too busy at this weekend. I'll take a look and will answer tomorrow.

[Igmat]

@dziamid, first of all, problem isn't in ATL. Actually webpack and its loaders aren't executed while testing.

First problem is caused by setupTestFrameworkScriptFile, so could you please tell me why do you need test-bundler.js? If you use it for coverage, then better option would be to use
"testResultsProcessor": "<rootDir>/node_modules/ts-jest/coverageprocessor.js" and --no-cache flag.

Second problem is caused by "jsx": "preserve" - currently we don't support it. I'll take a closer look on it but it seems that Jest logic doesn't support using several transformers for one file, so we have only two possible solutions - creating feature request in Jest and adding babel transpilation inside ts-jest, but seconds seems to cause a lot of issues, because I'm not sure that we will be able to correctly reflect user's babel config, and after all it not very good to make one package responsible for several transpilations.

Third problem is caused by your import statement in several files. Syntax like this:

import H1 from 'components/H1';

doesn't seem to be supported by jest-resolve, but I'll try to figure out what we can do with it in ts-jest.

P.S.
After fixing above problems in your config, not all tests will pass, but it seems to happen because of incorrect tests or implementation.

[Igmat]

Ok, while here is no responses, I think my last comment helped you to fix it. I'll create related TODO issues in order to find a workaround and may be even provide some changes to ts-jest in order to solve problems with "jsx": "preserve" and this type of import statements.

[Igmat]

Closing this due to #63 and #64 as more accurate issues.

[niedzielski]

First time user here. I seemed to have had a similar (?) issue with imports when I accidentally mangled my Jest config to omit transform. What really bit was me that the cache doesn't invalidate when the config changes. You can _really_ test your config by disabling it, jest --no-cache. You can check out the recommended example config here. I found the import token error quite cryptic.

[kulshekhar]

@niedzielski I'm slightly confused. Is the issue about the import token error or cache invalidation?

[niedzielski]

@kulshekhar, sorry for the late response. The import issue appeared at the time to come from a missing transform field in my config. The transform issue was difficult to track down because I appeared to be seeing a new issue that when the config changed, either through a different file via--config or when a consistently named config file itself changed, that the cache didn't invalidate. I had planned to report the caching config issue as a standalone bug but unfortunately I can no longer reproduce it. For now, I apologize for the noise and will file a ticket if I can reproduce it again.