javascript - No se pueden encontrar los mapas fuente para Karma+Jasmine+TypeScript+Webpack

karma-jasmine remap-istanbul

Question

Estoy intentando probar (con cobertura) mi aplicación TypeScript usando Karma, Jasmine y Webpack. Con lo siguiente, puedo ejecutar con éxito las pruebas, pero no puedo generar la cobertura correctamente. Estoy usando karma-remap-coverage ( https://github.com/sshev/karma-remap-coverage ) y parece bastante simple.

Parece que algo interesante está sucediendo (y estoy recibiendo algún tipo de informe de cobertura) pero con algunos ajustes aquí y allá, los números cambian drásticamente y nunca puedo cargar los mapas de origen.

Aquí está la configuración básica:

Tengo un directorio src que contiene 10 archivos .ts . Solo uno tiene un archivo .spec correspondiente en este momento.

El archivo de spec es bastante simple y fue suficiente para probar que podía ejecutar pruebas:

import ComponentToTest from ''./componentToTest'';

describe(''ComponentToTest'', () => {

  it(''should run a test'', () => {
      expect(1+1).toBe(2);
  });

  it(''should be able to invoke the a method'', () => {
      spyOn(ComponentToTest, ''foo'').and.callThrough();
      ComponentToTest.foo(''testing foo'');
      expect(ComponentToTest.foo).toHaveBeenCalled();
  });

});

Esto funciona como un amuleto cuando se combina con mi archivo tsconfig.json :

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    "sourceMap": true,
    "lib": ["es6", "dom"],
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules"
  ]
}

y archivo karma.conf.js :

module.exports = config => config.set({

    frameworks: [''jasmine''],

    mime: { ''text/x-typescript'': [''ts'',''tsx''] },

    // if I make this a generic ''./src/**/*.ts'' it seems to freeze up
    // without throwing any errors or running any tests, but that seems
    // like a separate issue...
    files: [
        ''./src/lib/componentToTest.ts'',
        ''./src/lib/componentToTest.spec.ts''
    ],

    preprocessors: {
        ''./src/**/*.spec.ts'': [''webpack''],
        ''./src/**/*.ts'': [''webpack'', ''sourcemap'', ''coverage'']
    },

    webpack: {
        devtool: "source-map",
        module: {
            rules: [
                {
                    test: //.ts?$/,
                    loader: ''ts-loader'',
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: [".ts", ".js"]
        }
    },

    webpackMiddleware: {
        quiet: true,
        stats: {
            colors: true
        }
    },

    // add both "karma-coverage" and "karma-remap-coverage" reporters
    reporters: [''progress'', ''coverage'', ''remap-coverage''],

    // save interim raw coverage report in memory
    coverageReporter: {
        type: ''in-memory''
    },

    // define where to save final remaped coverage reports
    remapCoverageReporter: {
        ''text-summary'': null,
        html: ''./coverage/html'',
        cobertura: ''./coverage/cobertura.xml''
    },

    colors: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: [''Chrome''],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true

});

Y finalmente, estoy lanzando las pruebas con una simple tarea Gulp:

gulp.task(''test'', function (done) {
  new Server({
    configFile: __dirname + ''/karma.conf.js'',
    singleRun: true
  }, (exitCode) => {
     done();
     process.exit(exitCode);
  }).start();
});

Cuando se ejecuta, obtengo un resultado que parece (en su mayoría) prometedor:

Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 1 of 2 SUCCESS (0 secs / 0.002 secs)
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 2 of 2 SUCCESS (0.026 secs / 0.004 secs)
[Error: Could not find source map for: "app/src/lib/componentToTest.ts"]
[Error: Could not find source map for: "app/src/lib/componentToTest.spec.ts"]

========================= Coverage summary =========================
Statements   : 43.69% ( 322/737 )
Branches     : 15.7% ( 38/242 )
Functions    : 35.47% ( 61/172 )
Lines        : 44.91% ( 322/717 )
====================================================================

¡Entonces algo está sucediendo! Lo que me hace sentir que estoy cerca. Cuando busco mi informe de cobertura en un navegador, veo el archivo .spec.ts y el archivo .ts la lista (que de nuevo, me estoy acercando) pero no estoy allí por un par de razones:

1. El archivo .spec.ts se está incluyendo en el informe de cobertura. Como este es el archivo de prueba, no quiero incluirlo.
2. Los mapas de origen no se generan correctamente; esto se desprende de los errores en la consola y también de la imposibilidad de navegar al informe de cobertura del archivo específico.

Siento que estoy muy cerca. ¿Hay algo simple que me falta o sugerencias?

Actualizar:

Me di cuenta de que estaba usando una versión anterior de Node y pensé que podría estar causando algunos problemas. 6.11.0 a 6.11.0 y si bien eso no solucionó nada, proporcionó un poco más de contexto:

Los errores están siendo reportados por remap-istanbul (no sorprende, realmente):

CoverageTransformer.addFileCoverage (/app/node_modules/remap-istanbul/lib/CoverageTransformer.js:148:17)

Estoy usando [email protected] que usa [email protected] - parece que ha habido problemas con remap-istanbul en el pasado, pero no en la versión que estoy usando.

También usando Webpack 2.6.1 y TypeScript 2.3.2

Answer 1

Bueno, después de varios días de probar cosas diferentes, finalmente encontré una solución que funciona. No estoy seguro de qué estaba causando el problema en mi primera publicación, pero aquí es donde terminé. Esto puede ser útil para otras personas que buscan una configuración realmente simple de TypeScript, Karma, Jasmine, Webpack (con cobertura).

• Mi estructura de archivos y archivo de spec permanecen igual.

• Mi tsconfig.json actualizado a:

  {
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      "noImplicitAny": false,
      "inlineSourceMap": true, // this line
      "sourceMap": false, // and this one
      "experimentalDecorators": true,
      "lib": ["es6", "dom"]
    },
    "exclude": [
        "node_modules"
    ]
  }

• Cambié al uso de awesome-typescript-loader lugar de ts-loader .

• Y finalmente, mi archivo karma.conf.js ahora se ve así:

  module.exports = config => config.set({
  
      // base path that will be used to resolve all patterns (eg. files, exclude)
      basePath: '''',
  
      frameworks: [''jasmine''],
  
      mime: { ''text/x-typescript'': [''ts'',''tsx''] },
  
      files: [
          ''node_modules/angular/angular.min.js'',
          ''./src/**/*.ts''
      ],
  
      preprocessors: {
          ''./src/**/*.ts'': [''webpack'']
      },
  
      webpack: {
  
          devtool: ''inline-source-map'',
          module: {
              rules: [
                  {
                      enforce: ''pre'',
                      test: //.js$/,
                      loader: ''source-map-loader'',
                      exclude: [
                          ''node_modules'',
                          //.spec/.ts$/
                      ]
                  },
                  {
                      test: //.ts?$/,
                      use: [
                          {
                              loader: ''awesome-typescript-loader'',
                              query: {
                                  /**
                                   * Use inline sourcemaps for "karma-remap-coverage" reporter
                                   */
                                  sourceMap: false,
                                  inlineSourceMap: true,
                                  compilerOptions: {
                                      removeComments: true
                                  }
                              },
                          }
                      ]
                  },
                  {
                      enforce: ''post'',
                      test: //.(js|ts)$/,
                      loader: ''istanbul-instrumenter-loader'',
                      exclude: [
                          /node_modules/,
                          //.spec/.ts$/
                      ]
                  },
                  { test: //.html$/, loader: ''html-loader'' }
              ]
          },
          resolve: {
              extensions: [".ts", ".js", ".html"]
          },
          externals: {
              angular: "angular"
          }
      },
  
      webpackMiddleware: {
          quiet: true,
          stats: {
              colors: true
          }
      },
  
      // add both "karma-coverage" and "karma-remap-coverage" reporters
      reporters: [''progress'', ''coverage'', ''remap-coverage''],
  
      // save interim raw coverage report in memory
      coverageReporter: {
          type: ''in-memory''
      },
  
      // define where to save final remaped coverage reports
      remapCoverageReporter: {
          ''text-summary'': null,
          html: ''./coverage/html'',
          cobertura: ''./coverage/cobertura.xml''
      },
  
      colors: true,
  
      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: [''Chrome''],
  
      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: true
  
  });

Las versiones finales del paquete incluyen:

• nodo 4.2.6 (también pude hacer que esto funcione con una versión más nueva de nodo, pero necesito estar aquí por otros motivos)
• awesome-typescript-loader 3.1.2
• istanbul-instrumenter-loader 2.0.0
• jasmin-core 2.5.2
• karma 1.6.0
• karma-chrome-launcher 2.0.0
• cobertura de karma 1.1.1
• karma-jasmine 1.1.0
• karma-remap-coverage 0.1.4
• karma-webpack 2.0.3
• mecanografiado 2.3.2
• paquete web 2.6.1

Ahora se ejecutan mis pruebas, no hay errores en la consola y tengo un informe de cobertura de los archivos originales de TypeScript.

Mucho crédito para la gente que lo armó (terminó guiando bastante mi solución final): https://github.com/AngularClass/angular-starter/tree/master/config