Unit testing 业力覆盖总是空的
几天来,我一直在尝试运行karma coverage,结果发现一个空白页面,如下所示。 以下是我的配置:Unit testing 业力覆盖总是空的,unit-testing,angular,typescript,karma-runner,karma-coverage,Unit Testing,Angular,Typescript,Karma Runner,Karma Coverage,几天来,我一直在尝试运行karma coverage,结果发现一个空白页面,如下所示。 以下是我的配置: var path = require('path'); var webpackConfig = require('./webpack.common'); module.exports = function (config) { var _config = { basePath: '', frameworks: ['jasmine'], files: [
var path = require('path');
var webpackConfig = require('./webpack.common');
module.exports = function (config) {
var _config = {
basePath: '',
frameworks: ['jasmine'],
files: [
{ pattern: './karma-shim.js', watched: false }
],
exclude: [],
preprocessors: {
'./karma-shim.js': ['webpack', 'sourcemap', 'coverage']
},
client: {
captureConsole: false
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
coverageReporter: {
dir: 'coverage/',
reporters: [{
type: 'json',
dir: 'coverage',
subdir: 'json',
file: 'coverage-final.json'
}]
},
remapIstanbulReporter: {
src: 'coverage/json/coverage-final.json',
reports: {
lcovonly: 'coverage/json/lcov.info',
html: 'coverage/html',
'text': null
},
timeoutNotCreated: 1000, // default value
timeoutNoMoreFiles: 1000 // default value
},
webpackServer: {
noInfo: true // please don't spam the console when running in karma!
},
reporters: ["mocha", "coverage", "karma-remap-istanbul"],
port: 9876,
colors: true,
logLevel: config.LOG_ERROR,
autoWatch: false,
browsers: ['PhantomJS'], // you can also use Chrome
singleRun: true
};
config.set(_config);
};
这是我的karma-shim.js文件
Error.stackTraceLimit = Infinity;
require('es6-shim');
require('reflect-metadata');
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');
var appContext = require.context('./app', true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
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);
文件夹结构如下:
你知道我在这里遗漏了什么吗?非常感谢你的帮助
谢谢您的因果报应配置显然缺少对来源的引用 请按如下方式修改配置:
module.exports = function (config) {
var _config = {
[...]
preprocessors: {
// Remove coverage as preprocessor for your tests -
// Istambul (runs coverage behind the scene for karma) will
// instrumentate this
'./karma-shim.js': ['webpack', 'sourcemap'],
// Add path to your source (.js or .ts - depands on your project)
'./index.ts': [ 'coverage' ]
},
[...]
},
[...]
}
说明:覆盖率根据单元测试测试您的代码-您需要为您的代码提供入口点以获得Karma Analysis覆盖率
额外服务-添加业力覆盖插件:
module.exports = function (config) {
var _config = {
[...]
plugins: [
require( 'karma-coverage' )
],
[...]
},
[...]
}
module.exports = function (config) {
var _config = {
[...]
plugins: [
require( '@angular/cli/plugins/karma' )
],
[...]
},
[...]
preprocessors: {
'./src/test.ts': [ '@angular/cli' ],
'./index.ts': [ 'coverage' ]
},
[...]
mime: {
'text/x-typescript': [ 'ts', 'tsx' ]
},
[...]
}
Extras-karma&typescript文件:
module.exports = function (config) {
var _config = {
[...]
plugins: [
require( 'karma-coverage' )
],
[...]
},
[...]
}
module.exports = function (config) {
var _config = {
[...]
plugins: [
require( '@angular/cli/plugins/karma' )
],
[...]
},
[...]
preprocessors: {
'./src/test.ts': [ '@angular/cli' ],
'./index.ts': [ 'coverage' ]
},
[...]
mime: {
'text/x-typescript': [ 'ts', 'tsx' ]
},
[...]
}
我也有同样的问题,我尝试了所有我能在互联网上找到的东西,但没有任何效果。所以我用下面的方法解决了这个问题,虽然很难,但很简单:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: false,
});
};
dir: require('path').join(__dirname, 'coverage'),
在我的例子中,最初的设置是
dir: require('path').join(__dirname, './../coverage/360-app'),
这让我很难过。但既然你一开始设置错误,即使你改变它也很难让它正确
在我重新克隆之后,我开始拥有我想要的一切:
祝大家好运。您是否尝试过在“预处理器”中提供源文件(不需要测试文件)?我想你错过了。哪一个?你能详细说明一下吗?在karma.conf.js中,你有一个“预处理器”标签。。我在那里只看到垫片文件。您还需要为源代码提供路径。始终为源代码生成覆盖率。所以它应该有类似“app/***.js”的东西。。。我想你不需要在那里归档。。因此,请删除该文件并仅使用源文件进行尝试。.填充文件具有以下配置:require.context('./app',true,/\.spec\.ts/);你不认为有必要吗?我从未使用过webpack,因此,根据我的理解,我建议预处理器正在寻找你的源文件,而我们不提供它。所以,让我们尝试一下并使用它。希望能奏效。“覆盖”预处理器是否引用了“业力覆盖”插件?如果是这样,您如何使karma coverage处理类型脚本文件?它似乎只处理JavaScript文件。@SaadBenbouzid您需要导入karma coverage插件,如-我更新了上面的答案。因果报应将它从那里带走。当谈到类型脚本时,您显然需要使用一些额外的预处理器,例如karma tsc预处理器(我没有测试过这个!),或者我在angular项目中日常使用的预处理器。也补充了上面的答案。希望这会有所帮助;-)