Gustav Wengel
Gustav Wengel

Reputation: 367

Getting breakpoints to work with jest, Visual studio code and a custom typescript transformer

I can't get breakpoints to work in VSCode using ts-jest as a custom preprocessor. If i use a debugger statement, it will break at the correct place, and show the correct sources, so the sourcemaps are being loaded and parsed.

On every breakpoint VSCode reports: Breakpoint ignored because generated code not found (source map problem?)

This is my setup (the same setup works fine in webstorm both with debugger statements and breakpoints)

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Jest",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
        "--runInBand",
        "--no-cache"
      ],
      "cwd": "${workspaceRoot}",
      "console": "integratedTerminal",
      "sourceMaps": true,
    }
  ]
}

.tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "moduleResolution": "node",
    "inlineSourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

package.json>jest

"jest": {
  "preset": "react-native",
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
  "mapCoverage": true,
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "json"
  ],
  "globals": {
    "__DEV__": true
  }
}

.babelrc

{
  "presets": [
    "react-native"
  ],
  "sourceMaps": "inline"
}

Upvotes: 4

Views: 1641

Answers (1)

Gustav Wengel
Gustav Wengel

Reputation: 367

This seems to have been fixed in later versions of ts-jest, though I'm not quite sure why. Breakpoints should work with node 8 out of the box with the above setup.

For further details see : https://github.com/kulshekhar/ts-jest/issues/212

Upvotes: 1

Related Questions