How to debug tests? (VS Code)

[alvipeo]

Writing tests without being able to debug code is difficult. Can we debug tests somehow in VS Code?

Thanks!

[yaroslavya]

Im using wallabyjs for that. Its awesome, when you need an immediate info on what your code is doing. And plays well with karma tests. Does it make sense to make a pull-request for a wallabyjs config file?

[alvipeo]

I tried it. But that's not what I'm talking about. I'd like to be able to use debugger in VS Code while running tests. So I could set a breakpoint inside test code.

[sumigoma]

#144

This extension is usable and allows you to set breakpoints in VS Code, but configuring it correctly is still a pain. Webpack-dev-server puts the transpiled .js files in a virtual filesystem so the sourcemaps can't map the lines correctly to your typescript without some work. Still experimenting.

[alvipeo]

Please share your findings when you're done.

[sumigoma]

You can get it working by installing the vscode chrome debug extension in vscode (https://github.com/Microsoft/vscode-chrome-debug), and then changing the output in module.exports within webpack.config.js to get webpack to change the sourcemaps to point to the local filesystem.

  // Config for our build files
  output: {
    path: root('dist'),
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js',
    devtoolModuleFilenameTemplate: function(info) {
      return "file:///"+info.absoluteResourcePath;
    }
  },

You'll need to change launch.json in vscode to the following

{
  "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": "Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "dist",
      "sourceMaps": true
    }
  ]
}

And finally, you can run npm run build:dev, followed by npm run server:prod to output the build files to dist and get http-server to load from that. Note that you won't be using webpack-dev-server, so you lose the auto-refresh capabilities. You'll have to manually build:dev again whenever you make a code change.

[jstri]

You could use this plugin: https://github.com/gajus/write-file-webpack-plugin, so you wouldn't need to run two separate scripts to create build files.

[sumigoma]

I tried this back when write-file-webpack-plugin had webpack 1.x as a dependency, but I couldn't get it to work. The project now uses webpack 2.x, but things may have improved since the last time I tried. Still requires investigation.

[tan9]

@siready the write-file-webpack-plugin works smoothly for me as described in #144 (comment)