Карта исходного кода + покрытие кода Стамбула / Испарта для веб-пакета + бабель (для es6) + мокко (+ карма)

Question

У меня есть тестовый проект по адресу https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage.

Он состоит из двух простых исходных файлов в src/один с преднамеренной ошибкой (src/lib2.js).

Я хочу упаковать и перенести с помощью babel из ES6 в ES5 и запустить тесты Mocha для этого комплекта, используя Karma.

Я уже добавил исходное сопоставление и проверил это, чтобы увидеть номер строки исходного файла.

Для меня трассировка стека выглядит так:

21 02 2016 16:03:15.445:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
21 02 2016 16:03:15.451:INFO [launcher]: Starting browser Chrome
21 02 2016 16:03:16.551:INFO [Chrome 48.0.2564 (Linux 0.0.0)]: Connected on socket /#yRS32ons0_2HGhrwAAAA with id 3072946

START:
  lib1
    ✖ should return 1

Finished in 0.015 secs / 0.001 secs

SUMMARY:
✔ 0 tests completed
✖ 1 test failed

FAILED TESTS:
  lib1
    ✖ should return 1
      Chrome 48.0.2564 (Linux 0.0.0)
    Error: SIMULATED ERROR
        at foo (/home/danb/projects/so-test-project/tests.webpack.js:135:10 <- webpack:///src/lib2.js:13:8)
        at Context.<anonymous> (/home/danb/projects/so-test-project/tests.webpack.js:93:31 <- webpack:///test/index.js:7:11)

На 2-й последней строке выше, это показывает webpack:///src/lib2.js:13 это правильное местоположение в оригинальном источнике.

Чтобы получить это сопоставление, я сделал это: https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage/commit/6ea992cae499dccc68488bcb3eaca642ae4ed24e

То, что я хочу сделать, это добавить покрытие, используя что-то вроде istanbul (или isparta, которое использует istanbul), чтобы я мог сгенерировать отчет покрытия HTML в покрытии / который показывает мне строки, которые не покрыты (потенциально), а также общее покрытие проценты.

Но я хочу убедиться, что мои трассировки стека по-прежнему отображаются правильно, как указано выше.

Я пробовал isparta-loader и isparta-instrumenter-loader для переноса и обработки файлов в веб-пакете, но номера строк в трассировке стека немного неправильны (см. Выше). Кажется, что-то похожее на Испарта, и документация не супер-дружественная.

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

Answer 1

У меня нет решения для одной конфигурации karma/webpack. Мой обходной путь - сделать 2 конфессий кармы - что я вполне доволен. (У меня есть и другие установки, не связанные с кармой, для запуска тестов.)

Один conf запускает тесты в фоновом режиме с точными трассировками стека для моего кода es6, а другой запускает покрытие с использованием isparta-loader для переноса и обработки моего исходного кода. ( Испарта-загрузчик использует Испарта, который использует Стамбул).

Так что мой "бегущий тест" карма-конф выглядит примерно так:

var webpack = require('webpack');
module.exports = function (config) {
  config.set({
    browsers: [ 'PhantomJS' ],
    singleRun: false,
    frameworks: [ 'mocha' ], // Use the mocha test framework
    files: [
      'tests.webpack.js'
    ],
    preprocessors: {
      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
    },
    reporters: [ 'mocha' ],
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          // Use imports loader to hack webpacking sinon.
          // https://github.com/webpack/webpack/issues/177
          {
            test: /sinon\.js/,
            loader: "imports?define=>false,require=>false"
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: { presets: ['es2015'] }
          }
        ]
      }
    },
    webpackServer: {
      noInfo: true
    }
  });
}

и мой репортаж о покрытии выглядит примерно так:

var webpack = require('webpack'),
    path = require('path');
module.exports = function (config) {
  config.set({
    browsers: [ 'PhantomJS' ],
    singleRun: true,
    frameworks: [ 'mocha' ],
    files: [
      'tests.webpack.js'
    ],
    preprocessors: {
      'tests.webpack.js': [ 'webpack' ]
    },
    reporters: [ 'coverage' ],
    webpack: {
      // *optional* babel options: isparta will use it as well as babel-loader
      babel: {
        presets: ['es2015']
      },
      // *optional* isparta options: istanbul behind isparta will use it
      isparta: {
        embedSource: true,
        noAutoWrap: true,
        // these babel options will be passed only to isparta and not to babel-loader
        babel: {
          presets: ['es2015']
        }
      },
      module: {
        loaders: [
          {
            test: /sinon\.js/,
            loader: "imports?define=>false,require=>false"
          },
          // Perform babel transpiling on all non-source, test files.
          {
            test: /\.js$/,
            exclude: [
              path.resolve('node_modules/'),
              path.resolve('lib/')
            ],
            loader: 'babel-loader',
            query: { presets: ['es2015'] }
          },
          // Instrument source files with isparta-loader (will perform babel transpiling).
          {
            test: /\.js$/,
            include: [
              path.resolve('lib/')
            ],
            loader: 'isparta'
          }
        ]
      }
    },
    webpackServer: {
      noInfo: true
    },
    coverageReporter: {
      reporters: [
        { type: 'html', dir: 'coverage/' },
        { type: 'text' }
      ]
    }
  });
}

Этот второй conf предоставляет текстовый отчет, который дает немедленную сводку покрытия в терминале, и отчет html, который дает хорошую подсветку исходного файла непроверенного кода. (В обоих случаях есть взлом для sinon, который не связан с этой проблемой.) tests.webpack.js использует веб-пакеты require.context вытащить в моем браузере тесты, написанные на мокко. И требуются различные плагины karma-*.

Answer 2

Возможно, вам повезет больше, если использовать новый официальный плагин Babel в Стамбуле, чтобы использовать свои источники для покрытия кода.

По моему опыту, по сравнению с ispartaон предоставил более точные отчеты о покрытии и не требовал никакой конфигурации, кроме добавления его в список плагинов в моей конфигурации Babel.

Исходные карты работали корректно "из коробки", когда я использовал их в своем проекте.