Configuring Jest for Typescript, es6 and Webpack 2

Question

In my tsconfig I currently have the module compilerOption property set to "es6" however, when I run Jest I receive the following error:

Test suite failed to run

  ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){require('ts-jest').install();import { User } from './models/user;
                                                                                                                         ^^^^^^
SyntaxError: Unexpected token import

   at transformAndBuildScript (node_modules\jest-runtime\build\transform.js:320:12)
      at process._tickCallback (internal\process\next_tick.js:103:7)

If I switch the module to “commonJS” then the tests run fine. However, I shouldn't need to do this as the babel plugin "transform-es2015-modules-commonjs" should transpile ES modules to commonJS for me (or is my understanding incorrect?).

I suspect I've misconfigured something small but important. Can anyone point out where I'm running into trouble?

Thanks in advance.

.tsconfig

    {
      "compilerOptions": {
        "module": "es6", // Changing this to "commonJS" resolves the error.
        "target": "es6",
        "moduleResolution": "node",
        "baseUrl": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "ts-build",
        "jsx": "preserve",
        "experimentalDecorators": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true
      },
      "filesGlob": [
          "**/*.ts",
          "**/*.tsx"
      ],
      "exclude": [
        "node_modules",
        "dist"
      ]
    }

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0",
    {"modules": false}
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

Jest section of the package.json

  "jest": {
    "transform": {
      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "testPathDirs": [
      "./src"
    ],
    "collectCoverage": true,
    "testResultsProcessor": "<rootDir>/node_modules/ts-jest/coverageprocessor.js"
  }

Note: I've also followed the official recommendations for setting up with webpack 2.

Answer 1

This appears to be a known issue, further reference here.

I was able to workaround the issue by adding separate override tsconfig settings for jest.

 "globals": {
      "__TS_CONFIG__": {
        "module": "commonjs",
         jsx": "react"
      }

Thus my project can continue to target es6 modules.

this gave me part of the solution. the final solution looked like this

package.json

{
  "private": true,
  "version": "0.0.0",
  "name": "example-typescript",
  "dependencies": {
    "react": "16.4.1",
    "react-dom": "16.4.1",
    "lodash-es": "^4.17.11"
  },
  "devDependencies": {
    "babel-cli": "^6",
    "babel-core": "^6",
    "babel-plugin-source-map-support": "^2.0.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6",
    "babel-preset-env": "^1.6",
    "babel-preset-stage-0": "^6",
    "babel-runtime": "^6",
    "babel-jest": "^22.0.3",
    "babel-plugin-transform-imports": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "@types/jest": "^23.1.1",
    "@types/node": "^10.12.3",
    "jest": "*",
    "typescript": "*",
    "ts-jest": "*"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(|ts|tsx)$": "ts-jest",
      "^.+\\.(js|jsx)$": "babel-jest"
    },
    "transformIgnorePatterns": [],
    "globals": {
      "__TS_CONFIG__": {
        "target": "es2015",
        "module": "commonjs",
        "jsx": "react"
      }
    },
    "testMatch": [
      "**/__tests__/*.+(ts|tsx|js)"
    ]
  }
}

together with .babelrc

{
  "env": {
    "test":{
      "passPerPreset": true,
      "presets": [
        "babel-preset-env"
      ],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-es2015-classes"
      ]
    }
  }
}