业力覆盖总是空的

Posted 2023-03-13

【中文标题】业力覆盖总是空的

【英文标题】：Karma coverage always coming empty

【发布时间】：2017-01-07 01:34:31

【问题描述】：

几天来，我一直在尝试运行业力覆盖，结果却发现如下所示的空白页。

这是我的配置：

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

文件夹结构如下：

知道我在这里缺少什么吗？非常感谢帮助。

谢谢

【问题讨论】：

您是否尝试在“预处理器”下提供源文件（不需要测试文件）？我想你错过了。

哪一个？能详细点吗？

在您的 karma.conf.js 中有一个“预处理器”标签。我在那里只看到 shim 文件。您还需要为源代码提供路径。始终为源代码生成覆盖率。所以它应该有类似'app/**/*.js'的东西......我认为你不需要 shim 文件......所以删除它并尝试只使用源文件..

shim 文件有这样的配置：require.context('./app', true, /\.spec\.ts/);你认为不需要吗？

我从未使用过 webpack，因此，根据我的理解，我建议预处理器正在寻找您的源文件，而我们没有提供它。所以，让我们试一试并使用它。希望有效。

【参考方案1】：

您的业力配置明显缺少对源的引用。

请修改配置如下：

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 分析覆盖率。

附加功能 - 添加 karma-coverage 插件：

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' ]
    ,
    [...]

【讨论】：

'coverage' 预处理器是否引用了“karma-coverage”插件？如果是这样，您如何使 karma-coverage 处理 TypeScript 文件？它似乎只处理 javascript 文件。

@SaadBenbouzid 你需要像导入业力覆盖插件一样 - 我已经更新了上面的答案。业力将从那里拿走它。当涉及到打字稿时，您显然需要使用一些额外的预处理器，例如。 karma-tsc-preprocessor（我还没有测试过这个！）或者我在 Angular 项目 angular-cli 中日常使用的一个。也添加到上面的答案中。希望这会有所帮助;-)

【参考方案2】：

我也遇到了同样的问题，我已经尝试了所有可以在 Internet 上找到的方法，但没有任何效果。所以我用以下困难但非常简单的方式解决了它：

创建一个新文件夹，或删除项目现有文件夹的所有内容（如果删除内容，您需要添加、提交和推送所有内容），然后克隆同一个项目重头再来。

像往常一样，运行命令“npm install”。

然后复制以下karma.conf.js文件内容，替换自己的karma.conf.js文件内容：

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

很可能是'coverage'部分出了问题

    dir: require('path').join(__dirname, 'coverage'), 

就我而言，原来的设置是

    dir: require('path').join(__dirname, './../coverage/360-app'),

这让我很难受。但是因为一开始就设置错了，就算改了也很难弄对。

重新克隆后，我开始拥有我想要的一切：

祝大家好运。