Incorrect source mapping debugging using vscode-jest on a project with ts-jest

[jasonterando]

This looks like an issue numerous people have bumped up against. I've read about attempts to address this by setting disableOptimisticBPs to true and/or sourceMaps to false, but disableOptimisticBPs isn't available anymore and sourceMaps didn't do anything for me. I've messed for hours with settings in Jest and ts-jest based upon old posts but to no avail. Thus, I'm posting here to hopefully get some more updated guidance, and have created a minimal demo project to demonstrate what I'm running into.

Environment

1. vscode-jest version:v5.2.3
2. node -v:18.17.1
3. npm -v or yarn --version: 10.1.0
4. npm ls jest or npm ls react-scripts: 29.7.0
5. your vscode-jest settings if customized:
   • jest.jestCommandLine? n/a
   • jest.autoRun? n/a
   • ts-jest: version 29.1.1
6. Operating system: Linux (Mint)

Prerequisite

• are you able to run jest test from the command line? Yes
• how do you run your tests from the command line? npx jest

Steps to Reproduce

Repository at https://github.com/jasonterando/demo-vscode-jest-vs-ts-jest. This is as minimal of a project as I can think of that demonstrates the issue. The MyClass.bad method throws an unhandled Error. When running from the command, the correct line is displayed. When running from vscode-jest, the incorrect line is displayed. The same issue manifests when setting a breakpoint at the location.

1. Run npm install
2. Run npx jest to run unit tests, test fails with the correct line displayed
3. Enable vscode-jest's Caught Exception option, and debug unit tests using vs-code; skip past the initial 4-5 errors that get thrown,after that the Error in MyClass will be hit at line 9, but the wrong line will be highlighted line 11
4. Turn off the Caught Exception option, set at MyClass line 9, debug unit tests in vs-code. When the breakpoint is encountered, the incorrect line will be displayed

Expected Behavior

Upon breakpoints or uncaught exceptions, the correct line will be displayed/highlighted.

Actual Behavior

Upon breakpoints or uncaught exceptions, the incorrect line will be displayed/highlighted

Screenshots

1. Running npx jest from the command line shows the correct location of the uncaught error:

2. Debugging unit tests in vscode-jest highlights the incorrect line, but notice that the correct line is referred to in the output from Jest

3. Debug breakpoint set at line 9...

4. ...is offset by two lines during debugging

[connectdotz]

@jasonterando, Thanks for the sample repo, I was able to reproduce your issue with it. However, once I changed the "sourceMaps" to true, everything worked fine. See the video below.

https://github.com/jest-community/vscode-jest/assets/891093/b206d2b8-48fd-441d-8c95-5b8836d5a6ef

Perhaps there is something else going on in your original project? Breakpoint issues, like the one you described, are usually sourcemap-related, the sample repo is a clear example.

[jasonterando]

(facepalm) - it's been a long morning lol. Yeah, set that to true and things seem to be better. Meanwhile, in my "real" project, I had to back out a bunch of other stuff I was trying to get it to work (mostly stuff around modules).

Thank you for responding so quickly and over a weekend!

Here's what seems to be good for me at the moment, in case it helps someone else:

jest.config.json

/** @type {import('ts-jest').JestConfigWithTsJest} */

// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest');
// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
// which contains the path mapping (ie the `compilerOptions.paths` option):
const { compilerOptions } = require('./tsconfig.json');

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
    verbose: true,
    setupFilesAfterEnv: [
        "./tests/setup.ts"
    ],
    collectCoverageFrom: [
        "src/*.ts",
        "src/**/*.ts"
    ],
    transformIgnorePatterns: [
        "node_modules/module-i-have-to-use",
        "/dist/.+\\.js"
    ],
    testMatch: [
        "**/*.test.ts"
    ],
    roots: [
        "<rootDir>/tests"
    ],
    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */)
};

tests/setup.ts

import 'reflect-metadata'

.vscode/launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "name": "vscode-jest-tests.v2",
            "request": "launch",
            "args": [
                "--runInBand",
                "--watchAll=false",
                "--testNamePattern",
                "${jest.testNamePattern}",
                "--runTestsByPath",
                "${jest.testFile}"
            ],
            "env": {
                "NODE_OPTIONS": "--experimental-vm-modules"
            },
            "cwd": "${workspaceFolder}",
            "sourceMaps": true,
            "stopOnEntry": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        }
    ]
}