Ts-jest: Sourcemaps do not work

[tomitrescak]

Thanks for the nice package. I have issues making sourcemaps work. I have tried adding --no-cache but I'm still getting error lines of transpiled source (or did I miss anything that console errors should be mapped to correct line?)

Here is my package.json

{
  "scripts": {
    "test": "jest --no-cache",
  },
  ...
  "jest": {
     "globals": {
      "__TS_CONFIG__": "tsconfig.test.json"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.storybook/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/.storybook/__mocks__/styleMock.js"
    },
    "setupFiles": [
      "<rootDir>/jest.startup.js"
    ],
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "snapshotSerializers": [
      "<rootDir>/node_modules/enzyme-to-json/serializer"
    ]
  }
}

And here is the tsconfig.test.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "lib": [
            "dom",
            "es2015",
            "es2016"
        ],
        "noEmitHelpers": false,
        "emitDecoratorMetadata": true,
        "jsx": "react",
        "target": "es2016",
        "module": "commonjs",
        "moduleResolution": "node",
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "strictNullChecks": false,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": false,
        "noUnusedParameters": true,
        "skipLibCheck": true,
        "skipDefaultLibCheck": true,
        "experimentalDecorators": true,
        "outDir": "./build",
        "types": [
            "chai",
            "react"
        ],
        "typeRoots": [
            "src/typings/overrides",
            "node_modules/@types"
        ],
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

[kulshekhar]

can you create a minimal repo that reproduces the issue you're facing?

[kulshekhar]

closing due to lack of response. If this needs to be reopened, let me know

[tkrotoff]

@kulshekhar and what about providing an example with ts-jest GitHub repo? this is a good common practice.
This will help people understand how to setup ts-jest and play with it. As of myself, I went back to run tsc as a pre-task and could not see any benefit to ts-jest due to the lack of a clear and simple working example, see https://github.com/kulshekhar/ts-jest/issues/46#issuecomment-276630132

[kulshekhar]

@tkrotoff there are tests in the repo that can help understand how to use ts-jest. These tests cover a lot of scenarios. In any case, if you think there's something that can be added that would improve this package, PRs are most welcome :)

[tkrotoff]

@kulshekhar

there are tests in the repo that can help understand how to use ts-jest

Tests are not user friendly, examples are.

See PR #118

[kulshekhar]

@tkrotoff can't argue with that

[RaulTsc]

Also facing this problem. Not sure how to get sourcemaps to work.

Sorry if this looks like a stackoverflow issue.

Maybe we can improve the documentation.

Would very much appreciate any hint!

package.json:

"jest": {
    "transform": {
      ".*": "<rootDir>/jest-preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "modulePaths": [
      "./src"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "ts",
      "tsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src"
    ]
  }

ts-preprocessor.js:

const tsc = require('typescript');
const tsConfig = require('./tsconfig.json');

module.exports = {
  process(src, path) {
    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
      var tscCode = tsc.transpile(
        src,
        tsConfig.compilerOptions,
        path,
        []
      );
      return tscCode;
    }
    return src;
  },
};

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "baseUrl": "./src",
    "rootDir": "./src",
    "declaration": false,
    "sourceMap": false,
    "inlineSourceMap": true,
    "lib": ["es7", "es2017"],
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "typeRoots" : [
      "./node_modules/@types"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

[kulshekhar]

@RaulTsc It would be more helpful if you opened a new issue and created a minimal repo that demostrates this issue. It'll be hard to look into this without something like that

[RaulTsc]

@kulshekhar Thanks! I will do that!

[kirillgroshkov]

sourcemaps are not working for me as well..

[kulshekhar]

@kirillgroshkov can you create a minimal repo that demonstrates the issue? It'll be hard to figure out what the problem in your setup is otherwise

[NathanBraslavski]

I have the same problem :-(
Did anyone create a minimal repo already?

[villelahdenvuo]

I was also struggling with broken sourcemaps, but disabling coverage made them work! I'm using Jest 24.5.0. I just changed my debug script to add --coverage=false and sourcemaps started working.

[xeptore]

@villelahdenvuo this is exactly why i love JS :)

[eurostar-fennec-cooper]

I was also struggling with broken sourcemaps, but disabling coverage made them work! I'm using Jest 24.5.0. I just changed my debug script to add --coverage=false and sourcemaps started working.

Omg, this works 🎉

[rivertam]

(this is the first thing that comes up on Google)

This is a bug within Jest regarding coverage breaking source maps:

https://github.com/facebook/jest/issues/5739

[js-kyle]

@rivertam thank you very much for posting the above