Sourcemaps with normal Usage, not Alternative usage

We’re having troubles trying to make source maps work with typescript spec source files and main source files.

If we stick with the Alternative usage described here, then generate source maps as suggested in following section here, we can happily browse typescript code from Chrome developer tools while debugging tests.

If we stick with the basic usage described here, and we load spec files through karma.conf.js, instead of require-ing them in test shim single entry point, it looks like sourcemaps stop working. Browser developer tools only show JS webpack-prepared bundles, not original typescript source files.

Is this second way feasible at all? Can anybody explain how to get there? Thanks for your time!

[sshev]

Here’s native solution to make source map work in typescript unit tests: include SourceMapDevToolPlugin plugin to webpack config and configure it to process .ts files as well:

plugins: [
  new webpack.SourceMapDevToolPlugin({
    filename: null, // if no value is provided the sourcemap is inlined
    test: /\.(ts|js)($|\?)/i // process .js and .ts files only
  })
]

[donaldpipowitch]

I can verify this with a simple test:

// karma.conf.js
module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: [ 'mocha' ],
    files: [ 'test/unit.js' ],
    preprocessors: {
      'test/unit.js': [ 'webpack', 'sourcemap' ]
    },
    plugins: [
      'karma-mocha',
      'karma-phantomjs-launcher',
      'karma-sourcemap-loader',
      'karma-webpack',
      'karma-spec-reporter'
    ],
    reporters: [ 'spec' ],
    browsers: [ 'PhantomJS' ],
    singleRun: true,
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          {
            test: /\.ts(x?)$/,
            loader:
              `babel?` +
              `presets[]=${require.resolve('babel-preset-es2015')},` +
              `presets[]=${require.resolve('babel-preset-stage-0')}` +
              `!ts`
          }
        ]
      }
    },
    webpackMiddleware: {
      noInfo: true
    }
  })
}

// test/unit.js
require('./foo-unit.ts');

// test/foo-unit.ts
throw new Error('test');

Outputs

  Error: test
  at /Users/my-name/Workspace/test/test/unit.js:7594 <- webpack:///test/foo-unit.ts:1:0

This works nice. But let us change test/unit.js to test/unit.ts:

// karma.conf.js
...
    files: [ 'test/unit.ts' ],
    preprocessors: {
      'test/unit.ts': [ 'webpack', 'sourcemap' ]
    },
...

// test/unit.ts
import './foo-unit.ts';

Outputs

  Error: test
  at /Users/my-name/Workspace/test/test/unit.ts:7595

The mapping is lost.