ts-jest does not recognize es6 imports

Question

I'm adding typescript support to a react codebase, and while the app is working ok, jest tests are failing all over the place, apparently not recognizing something about es6 syntax.

We're using ts-jest for this. Below is the error message I'm getting, right off the bat when trying to process jest's tests setup file.

 FAIL  src/data/reducers/reducers.test.js   ● Test suite failed to run      /Users/ernesto/code/app/react/setupTests.js:1     ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './polyfills';                                                                                                     ^^^^^^^^^^^^^      SyntaxError: Unexpected string        at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17) 

It fails to recognize a simple import './polyfills', saying that the quoted string is unexpected.

These are my settings:

jest config in package.json

"jest": {   "setupTestFrameworkScriptFile": "<rootDir>/app/react/setupTests.js",   "transform": {     "^.+\\.tsx?$": "ts-jest"   },   "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",   "moduleFileExtensions": [     "ts",     "tsx",     "js",     "jsx",     "json",     "node"   ] }, 

tsconfig.json

{   "compilerOptions": {     "declaration": false,     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "lib": ["es6", "dom"],     "module": "es6",     "moduleResolution": "node",     "allowJs": true,     "allowSyntheticDefaultImports": true,     "sourceMap": true,     "target": "es5",     "jsx": "react",     "forceConsistentCasingInFileNames": true,     "noImplicitReturns": true,     "noImplicitThis": true,     "noImplicitAny": true,     "skipDefaultLibCheck": true,     "strictPropertyInitialization": true,     "strictNullChecks": true,     "suppressImplicitAnyIndexErrors": true,     "noUnusedLocals": true,     "noErrorTruncation": true   },   "exclude": ["app/assets","node_modules", "vendor", "public"],   "compileOnSave": false } 

.babelrc

{   "presets": [     [       "env",       {         "modules": false,         "targets": {           "browsers": "> 1%",           "uglify": true         },         "useBuiltIns": true       }     ],     "react",     "es2015"   ],   "plugins": [     "syntax-dynamic-import",     "transform-object-rest-spread",     [       "transform-class-properties",       {         "spec": true       }     ]   ] } 

In case it is relevant, this is a React codebase being used inside a rails app, and we're using rails/webpacker to that end. We followed their instructions to add TypeScript support to it, and it worked like a charm, except for this jest part, which they do not cover.

Answer 1

I eventually found out what the problem was. It turns out it was there in ts-jest's README all the time.

There's a section in the README titled Using ES2015+ features in Javascript files. In these cases, you need to instruct jest to use babel-jest as a transform for .js files.

"jest": {   "transform": {     "^.+\\.jsx?$": "babel-jest", // Adding this line solved the issue     "^.+\\.tsx?$": "ts-jest"   },   // ... },