Setting breakpoints in Typescript Jasmine tests with Visual Studio Code

Question

I am trying to set up a launch configuration in Visual Studio Code so that I can debug my unit tests.

My tests are written in Typescript. The tests and the code they test are compiled into a single js file with a source map.

With the configuration below I can set a breakpoint in the js file and have Visual Studio Code highlight the line in the ts file when it stops. This suggests that the sourcemap is working to some extent. However if I put a breakpoint in a ts file then it is ignored.

Any ideas on how I can get breakpoints in the ts file to work?

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Unit tests",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "node_modules/jasmine/bin/jasmine.js",
            // Automatically stop program after launch.
            "stopOnEntry": false,
            // Command line arguments passed to the program.
            "args": ["JASMINE_CONFIG_PATH=test/script/jasmine.json"],
            // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
            "cwd": ".",
            // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": ["--nolazy"],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": true,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": "test/script"
        }
    ]
}

Answer 1

The following configuration works fine for me and allow to debug jasmine tests. In your launch.json:

{
    // Name of configuration; appears in the launch configuration drop down menu.
    "name": "Launch Unit Tests",
    // Type of configuration.
    "type": "node",
    // Workspace relative or absolute path to the program.
    "program": "spec/runner.ts",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    // Command line arguments passed to the program.
    "args": [],
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
    "cwd": ".",
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
    "runtimeExecutable": null,
    // Optional arguments passed to the runtime executable.
    "runtimeArgs": ["--nolazy"],
    // Environment variables passed to the program.
    "env": {
        "NODE_ENV": "development"
    },
    // Use JavaScript source maps (if they exist).
    "sourceMaps": true,
    // If JavaScript source maps are enabled, the generated code is expected in this directory.
    "outDir": "dist/spec",
    "request": "launch"
}

The runner.ts is as follows:

'use strict';

var Jasmine = require('jasmine');
var j = new Jasmine();

j.loadConfigFile('spec/support/jasmine.json');
j.configureDefaultReporter({
    showColors: true
});
j.execute();

The project file structure is:

-spec
--runner.ts
--support
----jasmine.json
--folderWithTests1
-dist
--spec
.....

Note - "dist" is the folder where spec ts files are built to. Therefore "outDir" is set to "dist/spec".

Hope this will help.