如何从Angular5 TypeScript项目获取Cobertura代码覆盖率

Hey there! I’ve worked through this exact scenario with Angular projects on VSTS before—let’s get your coverage reports generating correctly so you can publish them in your pipeline. Here’s a step-by-step breakdown:

1. Install the Right Coverage Reporter #

First, make sure you have the karma-coverage-istanbul-reporter installed—it’s the most reliable tool for generating Cobertura reports with Angular 5:

npm install karma-coverage-istanbul-reporter --save-dev

2. Update Your Karma Config (karma.conf.js) #

Your Karma config needs to be adjusted to enable the coverage reporter and output the Cobertura XML file that VSTS expects. Replace or add these sections to your config:

module.exports = function(config) {
  config.set({
    // Keep your existing basePath, frameworks, files, preprocessors, etc.

    // Add coverage-istanbul to your reporters list
    reporters: ['progress', 'coverage-istanbul'],

    // Configure the coverage reporter
    coverageIstanbulReporter: {
      // Include the Cobertura format along with HTML for local debugging
      reports: ['html', 'lcovonly', 'cobertura'],
      // Set the output directory for reports
      dir: require('path').join(__dirname, './coverage'),
      subdir: '.',
      // Fix path issues with Webpack (common in Angular projects)
      fixWebpackSourcePaths: true,
      // Skip files that have zero coverage (optional but clean)
      skipFilesWithNoCoverage: true,
      // Specify the exact filename for the Cobertura report
      'report-config': {
        cobertura: {
          file: 'cobertura-coverage.xml'
        }
      }
    },

    // Critical for CI: Use Chrome Headless since VSTS agents run without a GUI
    browsers: ['ChromeHeadless'],
    // Optional: Disable auto-watch and single-run for CI
    autoWatch: false,
    singleRun: true
  });
};

3. Adjust Your Test Script #

Update the test script in your package.json to force coverage generation and disable watch mode (perfect for CI):

{
  "scripts": {
    "test": "ng test --code-coverage --watch=false"
  }
}

4. Configure VSTS to Publish the Report #

In your VSTS CI/CD pipeline:

• Add a Publish Code Coverage Results task after your test run step
• Set the Coverage tool to Cobertura
• Enter the Summary file path as:

  $(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml
  

Common Pitfalls to Check #

• Headless Chrome: If you were using regular Chrome in your config, VSTS agents can’t run it—make sure ChromeHeadless is set as your browser. You can install the launcher if needed: npm install karma-chrome-launcher --save-dev
• Excluded Files: Double-check your tsconfig.spec.json and Karma config’s exclude sections—ensure your components, modules, and services aren’t accidentally excluded from coverage
• Old Coverage Tools: If you were using karma-coverage before, replace it with karma-coverage-istanbul-reporter—the former doesn’t play well with Angular 5 and Cobertura outputs

Once you make these changes, run your tests locally first to verify the coverage/cobertura-coverage.xml file is generated, then push the config to your repo and let VSTS do the rest!

内容的提问来源于stack exchange，提问作者Damounet