Debugging from jest test is all out of wack with the line numbers

[dsanders1234]

I don't know if this is just a configuration fix (such as to use inline source maps) or what, but it doesn't appear to work out of the box, at least when debugging in IntelliJ. It works when stepping through actual jest code, but not in the code under test.

[alexjoverm]

Hmmm, probably there could be some configuration missing for source maps on Jest. That's something we must investigate.

[alexjoverm]

Could you @dsanders1234 provide some reproduction steps/repo?

[dsanders1234]

Upon further investigation, it happens when jest configuration "collectCoverage" is set to true

[alexjoverm]

@dsanders1234 could you describe in detail the issue? Do you have a fix for it?

[abner]

Upon further investigation, it happens when jest configuration "collectCoverage" is set to true

When collecting coverage, the code is istrumented, i think. Because of that, the source map generated wouldn't match the actual code.

[jordond]

I was having the same problem, and I narrowed it down to "allowSyntheticDefaultImports": true in the tsconfig.json.

So I created 2 more tsconfigs.

tsconfig.base.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "rootDir": "src",
    "sourceMap": true,
    "strict": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "suppressImplicitAnyIndexErrors": true,
    "baseUrl": ".",
    "typeRoots": ["node_modules/@types"]
  },
  "include": ["src"]
}

Then a config for running jest.
Note: inlineSourceMap and inlineSources were required for me to debug properly using VSCode.

tsconfig.test.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "commonjs",
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

And finally the config file for rollup to use when building

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "es2015",
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "declarationDir": "dist/types",
    "outDir": "dist/lib",
    "declaration": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"]
}

Now I can properly debug tests with VSCode, and linting/building still works.

[alexjoverm]

@jordond that setup looks nice! Do you mind opening a PR so we can merge the changes with the repo?

[Toilal]

@jordond How do you load tsconfig.test.json file when running tests ? It should appear somewhere in package.json jest section ?

I have found this page, it works when running npm run test from command line and runs in Intellij IDEA too, but still no breakpoint because line numbers are still broken :(

"globals": {
  "ts-jest": {
    "tsConfig": "tsconfig.test.json"
  }
},

[Toilal]

"lib": ["es2015", "es2016", "es2017", "dom"] should be moved to common tsconfig.base.json file.

[Toilal]

In my case, it seems the problem is only related to collectCoverage: true, as stated by @dsanders1234 comment. @jordond configuration doesn't help, only setting collectCoverage: false in package.json fix the issue.

I would advocate for removing this setting from package.json, and adding --coverage into npm test and test:watch scripts. With this change, it'll still run with coverage inside travisCI and other scripts relying on npm run test, while having IDE debug functionnal (tested at least with IntelliJ IDEA).