Не удается найти исходные карты для Karma + Jasmine + TypeScript + Webpack

я пытаюсь проверить (с охватом) мое приложение TypeScript с помощью Karma, Jasmine и Webpack. Со следующим я могу успешно запускать тесты, но не могу правильно генерировать покрытие. Я использую karma-remap-coverage (https://github.com/sshev/karma-remap-coverage) и это кажется достаточно простым.

это выглядит как будто происходит что-то интересное (и я получаю какой-то отчет о покрытии), но с несколькими настройками здесь и там, цифры резко меняются, и я никогда не смогу загрузить исходные карты.

вот основная настройка:

у меня есть src каталог, содержащий 10 .ts файлы. Только у одного есть соответствующий на данный момент.

на spec файл довольно прост и был достаточно, чтобы доказать, что я могу запускать тесты:

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();
  });

});

это работает как шарм, когда в паре с моим :

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

и 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

});

и наконец, я запускаю тесты с простой задачей залпом:

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

при запуске я получаю вывод, который кажется (в основном) многообещающим:

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 )
====================================================================

так что что-то происходит! Что заставляет меня чувствовать, что я близко. Когда я просматриваю отчет о покрытии в браузере, я вижу оба и .ts файл в списке (который снова становится ближе), но я не совсем там по нескольким причинам:

  1. в включается в отчет о покрытии. Поскольку это тестовый файл, я не хочу его включать.
  2. исходные карты не генерируются должным образом - это ясно из ошибок в консоли, а также из невозможности просмотра отчета о покрытии конкретного файла.

я чувствую, что я чертовски близко. Есть ли что-то простое, что я пропустил или предложения?

обновление:

I понял, что я использую более старую версию Node и думал, что это может вызвать некоторые проблемы. Я обновлен до 6.11.0 и хотя это ничего не решило, это дало немного больше контекста:

об ошибках сообщает remap-istanbul (не удивительно, на самом деле):

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

я использую karma-remap-coverage@0.1.4 использует remap-istanbul@0.8.4 - похоже, что были проблемы с remap-istanbul в прошлом, но не в той версии, которую я использую.

также с помощью Webpack 2.6.1 и машинописный текст 2.3.2

1 ответов


Ну, после нескольких дней попыток, я, наконец, нашел решение, которое работает. Я не уверен, что конкретно вызвало проблему в моем первом посте, но вот где я оказался. Это может быть полезно для кого-то еще, кто ищет очень простой текст, Karma, Jasmine, Webpack (с покрытием).

  • моя файловая структура и spec файл остался прежним.
  • мой tsconfig.json обновление кому:

    {
      "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "inlineSourceMap": true, // this line
        "sourceMap": false, // and this one
        "experimentalDecorators": true,
        "lib": ["es6", "dom"]
      },
      "exclude": [
          "node_modules"
      ]
    }
    
  • я переключился на использование awesome-typescript-loader вместо ts-loader.

  • и, наконец, моя karma.conf.js файл теперь выглядит так:

    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
    
    });
    

окончательные версии пакета включают:

  • узел 4.2.6 (я также смог заставить это работать с более новой версией node, но должен быть здесь по другим причинам)
  • удивительный-typescript-загрузчик 3.1.2
  • istanbul-instrumenter-loader 2.0.0
  • Жасмин-основной 2.5.2
  • карма 1.6.0
  • karma-chrome-launcher 2.0.0
  • карма-покрытие 1.1.1
  • карма-Жасмин 1.1.0
  • карма-переназначение-покрытие 0.1.4
  • karma-webpack 2.0.3
  • машинопись 2.3.2
  • webpack 2.6.1

теперь мои тесты выполняются, в консоли нет ошибок, и у меня есть отчет о покрытии исходных файлов TypeScript!

много кредитов для людей, которые собрали это вместе (это закончилось тем, что направило довольно много моего окончательного решения):https://github.com/AngularClass/angular-starter/tree/master/config