javascript - Cómo configurar karma para que los archivos fuente mecanografiados sean depurables

typescript angular

Question

Descargué un proyecto inicial Angular2 Webpack Starter y lo inicié sin problemas. Un inconveniente que tengo es la depuración de archivos fuente bajo pruebas unitarias. Todos los archivos *.spec.ts se cargan en el navegador y se pueden debuguar, por lo que map archivos de map se generan al menos para ellos. Cuando entro en un archivo fuente bajo prueba, obtengo algo como esto:

configuración de karma:

module.exports = function(config) {
var testWebpackConfig = require(''./webpack.test.js'');

config.set({
    basePath: '''',
    frameworks: [''jasmine''],
    exclude: [ ],
    files: [ { pattern: ''./config/spec-bundle.js'', watched: false } ],
    preprocessors: { ''./config/spec-bundle.js'': [''coverage'', ''webpack'', ''sourcemap''] },
    webpack: testWebpackConfig,
    coverageReporter: {
      dir : ''coverage/'',
      reporters: [
        { type: ''text-summary'' },
        { type: ''json'' },
        { type: ''html'' }
      ]
    },
webpackServer: { noInfo: true },
reporters: [ ''mocha'', ''coverage'' ],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [
  ''Chrome''
],
singleRun: false
});
};

webpack.test.js:

const helpers = require(''./helpers'');
const ProvidePlugin = require(''webpack/lib/ProvidePlugin'');
const DefinePlugin = require(''webpack/lib/DefinePlugin'');
const ENV = process.env.ENV = process.env.NODE_ENV = ''test'';
module.exports = {
    devtool: ''inline-source-map'',
    resolve: {
        extensions: ['''', ''.ts'', ''.js''],
        root: helpers.root(''src''),
    },
    module: {
    preLoaders: [
      {
        test: //.ts$/,
        loader: ''tslint-loader'',
        exclude: [helpers.root(''node_modules'')]
      },
      {
        test: //.js$/,
        loader: ''source-map-loader'',
        exclude: [
            helpers.root(''node_modules/rxjs''),
            helpers.root(''node_modules/@angular2-material''),
            helpers.root(''node_modules/@angular'')
      ]}
   ],
loaders: [
{
    test: //.ts$/,
    loader: ''awesome-typescript-loader'',
    query: {
      compilerOptions: {
          removeComments: true
      }
    },
    exclude: [//.e2e/.ts$/]
  },
  { test: //.json$/, loader: ''json-loader'', exclude: [helpers.root(''src/index.html'')] },
  { test: //.css$/, loaders: [''to-string-loader'', ''css-loader''], exclude: [helpers.root(''src/index.html'')] },
  { test: //.html$/, loader: ''raw-loader'', exclude: [helpers.root(''src/index.html'')] }
],
postLoaders: [
{
    test: //.(js|ts)$/, loader: ''istanbul-instrumenter-loader'',
    include: helpers.root(''src''),
    exclude: [
      //.(e2e|spec)/.ts$/,
      /node_modules/
    ]
  }
]
},
plugins: [
new DefinePlugin({
  ''ENV'': JSON.stringify(ENV),
  ''HMR'': false,
  ''process.env'': {
    ''ENV'': JSON.stringify(ENV),
    ''NODE_ENV'': JSON.stringify(ENV),
    ''HMR'': false,
  }
}),
],
tslint: {
    emitErrors: false,
    failOnHint: false,
    resourcePath: ''src''
  },
node: {
    global: ''window'',
    process: false,
    crypto: ''empty'',
    module: false,
    clearImmediate: false,
    setImmediate: false
}
};

spec-bundle.js:

Error.stackTraceLimit = Infinity;
require(''core-js/es6'');
require(''core-js/es7/reflect'');
require(''ts-helpers'');
require(''zone.js/dist/zone'');
require(''zone.js/dist/long-stack-trace-zone'');
require(''zone.js/dist/jasmine-patch'');
require(''zone.js/dist/async-test'');
require(''zone.js/dist/fake-async-test'');
require(''zone.js/dist/sync-test'');
require(''rxjs/Rx'');
var testing = require(''@angular/core/testing'');
var browser = require(''@angular/platform-browser-dynamic/testing'');
testing.setBaseTestProviders(
  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
);
var testContext = require.context(''../src'', true, //.spec/.ts/);
function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}
var modules = requireAll(testContext);

Esta configuración es como en el paquete de inicio con pequeñas modificaciones, si es que hay alguna. ¿Podría decirme cómo modificar esta configuración para que los archivos fuente .ts puedan ser debugibles con las estadísticas de cobertura.

Answer 1

Tuve un problema similar con mi proyecto (que no es Angular2 Webpack Starter, pero creo que tiene la misma causa).

WebPack, de forma predeterminada, no pasa los mapas de origen hasta Karma a menos que la extensión de archivo sea .js (o .jsx si está utilizando React). En una configuración como esta, Karma + WebPack simplemente transpila los archivos .ts (o .tsx ) directamente de TypeScript a JavaScript y los sirve bajo el mismo nombre de archivo.

Encontré una solución que funcionó para mí en la página Problemas de GitHub para karma-webpack . El truco es inyectar webpack.SourceMapDevToolPlugin con un filtro de archivos ampliado en la configuración de la carpeta web. Para ti, eso debería verse más o menos así:

var webpack = require(''webpack'');
// in your config.set:
plugins: [
  // existing plugins go here
  new webpack.SourceMapDevToolPlugin({
    filename: null, // if no value is provided the sourcemap is inlined
    test: //.(ts|js)($|/?)/i // process .js and .ts files only
  })
]

Answer 2

Debes comentar el cargador de Estambul dentro de tu webpack.test.config.js, como este

    // {
    //   enforce: ''post'',
    //   test: //.(js|ts)$/,
    //   loader: ''istanbul-instrumenter-loader'',
    //   include: helpers.root(''src''),
    //   exclude: [
    //     //.(e2e|spec)/.ts$/,
    //     /node_modules/
    //   ]
    // }

luego simplemente ejecuta:

 npm run watch:test