Как заставить Browserify, Babel и Coverage работать вместе в Карме?
Я устал от попыток заставить библиотеки узлов работать правильно вместе, но это часть работы, так что дальше.
У меня есть приложение ES6, предназначенное для браузера. У меня есть набор модульных тестов для моих файлов, которые я использую, когда мое приложение было написано в ES5. Я использую Browserify для обработки модулей импорта / экспорта и связывания моего дистрибутива. Это отлично работает при запуске приложения в браузере. Я могу успешно просмотреть исходные файлы и файлы спецификаций и запустить тесты, и тесты пройдены. Я очень близок к тому, чтобы заставить это работать.
Единственная проблема - это освещение. Самое близкое, что я получил, - это освещение всех сгенерированных файлов karma-browserify, каждый из которых выглядит следующим образом:
require('/absolute/path/to/the/corresponding/file.js');
И покрытие, очевидно, показывает как 100% для всех файлов, потому что каждый из них - только одна строка.
Это мой karma.conf.js:
import babelify from 'babelify';
import isparta from 'isparta';
import paths from './paths';
var normalizeBrowserName = (browser) => browser.toLowerCase().split(/[ /-]/)[0];
export default function(config) {
config.set({
basePath: '..',
browsers: ['PhantomJS'],
frameworks: ['browserify', 'jasmine'],
files: paths.test.files,
preprocessors: {
'app/**/*.js': ['browserify', 'sourcemap', 'coverage'],
[paths.test.testFiles]: ['babel'],
},
plugins: [
'karma-babel-preprocessor',
'karma-browserify',
'karma-coverage',
'karma-jasmine',
'karma-junit-reporter',
'karma-phantomjs-launcher',
'karma-sourcemap-loader',
],
autoWatch: false,
colors: false,
loggers: [{ type: 'console' }],
port: 9876,
reporters: ['progress', 'dots', 'junit', 'coverage'],
junitReporter: {
outputFile: paths.test.resultsOut,
suite: '',
},
browserify: {
debug: true,
noParse: paths.js.noparse(),
configure: (bundle) => {
bundle.once('prebundle', () => bundle.transform(babelify.configure({ ignore: 'lib/!**!/!*' })));
},
},
coverageReporter: {
instrumenters: { isparta },
instrumenter: {
[paths.test.cover]: 'isparta',
},
reporters: [
{ type: 'text', },
{ type: 'html', dir: paths.test.coverageOut, subdir: normalizeBrowserName },
{ type: 'cobertura', dir: paths.test.coverageOut, subdir: '.', file: 'coverage.xml' },
],
},
logLevel: config.LOG_DEBUG,
});
};
Я действительно понятия не имею, как работает любая из этих библиотек, поэтому я не знаю, с чего начать при отладке. Я понимаю, что порядок препроцессоров имеет значение, так что Browserify запускает исходные файлы, передает полученные файлы ссылок в генератор исходных карт, а затем генератор исходных карт передает полученные результаты в покрытие кармы. Но есть некоторая потеря связи между Browserify и всем, что обрабатывает покрытие. Испарта (которая использует Стамбул за кулисами) не знает, что browserify работает, и я не знаю, что он видит.
Если у кого-то есть опыт тестирования модульной ES6 С надлежащим покрытием кода, пожалуйста, дайте мне знать, если я на правильном пути, или я должен попробовать что-то еще.
3 ответа
Это конфигурация, которая работала для меня, обратите внимание, что я использую browserify-istanbul, а не isparata.
var istanbul = require('browserify-istanbul');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'mocha'],
files: [
'test/**/*Spec.js'
],
exclude: [
'**/*.sw?'
],
preprocessors: {
'test/**/*Spec.js': ['browserify', 'coverage']
},
browserify: {
debug: true,
transform: [
['babelify', {
ignore: /node_modules/
}],
istanbul({
ignore: ['test/**', '**/node_modules/**']
})
],
extensions: ['.jsx']
},
babelPreprocessor: {
options: {
sourceMap: 'inline'
},
sourceFileName: function(file) {
return file.originalPath;
}
},
coverageReporter: {
dir: 'coverage/',
reporters: [
{ type: 'text-summary' }
]
},
browserNoActivityTimeout: 180000,
reporters: ['coverage', 'progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
это была огромная боль, чтобы получить работу.
надеюсь, это поможет
КАК: Карма + Вавилон + Реакция + Обзоры + Стамбул
Я думаю, я получил это.
Если я не буду, пинг мне gus+overflow@mythril.co
Не уверен, что предыдущий ответ не работает связан с использованием жасмина вместо мокко, но я понял, что работает с этими настройками.
Требуемые пакеты: кроме очевидного (Реакт, Карма, Жасмин, Browserify)
isparta - an Istanbul instrumenter for ES6
browserify-istanbul - a browserify transform
babelify - another browserify transform
babel - JS compiler
babel-preset-2015 - ES6 compile preset
babel-preset-react - React compile preset
Создайте файл.babelrc в корневом каталоге. Я был очень озадачен тем, где размещать опции Babel в инструментах, но большинство (и этих) инструментов Babel будут искать .babelrc
{
"presets": ["es2015", "react"],
"sourceMap": "inline"
}
karma.config.js:
const isparta = require('isparta');
const istanbul = require('browserify-istanbul');
module.exports = function (config) {
config.set({
basePath: '',
browsers: ['Firefox', 'Chrome', 'PhantomJS', 'Safari'],
captureConsole: true,
clearContext: true,
colors: true,
files: [
// you need this for Phantom
'node_modules/phantomjs-polyfill/bind-polyfill.js',
// import any third party libs, we bundle them in another gulp task
'./build/libs/vendor-bundle.js',
// glob for spec files
'__PATH_TO_SPEC_FILES_/*.spec.js'
],
frameworks: ['jasmine', 'browserify'],
logLevel: config.LOG_INFO,
preprocessors: {
// I had to NOT include coverage, the browserify transform will handle it
'__PATH_TO_SPEC_FILES_/*.spec.js': 'browserify'
},
port: 9876,
reporters: ['progress', 'coverage'],
browserify: {
// we still use jQuery for some things :(
// I don't think most people will need this configure section
configure: function (bundle) {
bundle.on('prebundle', function () {
bundle.external(['jquery']);
});
},
transform: [
// this will transform your ES6 and/or JSX
['babelify'],
// (I think) returns files readable by the reporters
istanbul({
instrumenter: isparta, // <--module capable of reading babelified code
ignore: ['**/node_modules/**', '**/client-libs/**']
})
],
// our spec files use jsx and so .js will need to be compiled too
extensions: ['.js', '.jsx'],
// paths that we can `require()` from
paths: [
'./node_modules',
'./client-libs',
'./universal'
],
debug: true
},
coverageReporter: {
reporters: [
{ type: 'html', dir: 'coverage/Client' },
{ type: 'text-summary' }
]
}
});
};
С Кармой, я думаю, это будет выглядеть примерно так (?):
// Karma configuration
'use strict';
let babelify = require( 'babelify' );
let browserify = require('browserify');
let browserifyBabalIstanbul = require('browserify-babel-istanbul');
let isparta = require('isparta');
browserify: {
debug: true,
transform: [
browserifyBabalIstanbul({
instrumenter: isparta,
instrumenterConfig: { babel: { presets: ["es2015"] } },
ignore: ['**/node_modules/**', '**/unitest/**']
}),
[ babelify, { presets: ["es2015"] } ]
]
},
см. следующую ссылку: Найдите хороший способ получить отчет о покрытии с помощью кармы?