angular-cli: Bug: Code Coverage Report

Workaround

As a workaround I found the special comment /* istanbul ignore next */

If you place after your class, the constructor gets ignored. Has to be exactly after the brace, do not break lines.

Example

export class InternalComponent {
    constructor(private authService: any) { 
    }
} /* istanbul ignore next */

Generates

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var InternalComponent = (function () {
        function InternalComponent(authService) {
            this.authService = authService;
        }
        return InternalComponent;
    }()); /* istanbul ignore next */
    exports.InternalComponent = InternalComponent;
});

Which ignores this line exports.InternalComponent = InternalComponent; that causes the issue.

Note: If you have static members in your class add the comment after the last one, example:

static readonly authKey = 'access_token'; /* istanbul ignore next */

To ignore super

super() /* istanbul ignore next */;

If you have generics and/or @Inject in your constructor params, try to break lines.

With those hacks I got 100% coverage.

UPDATE: Well, yes, this is pretty ugly and might not work in all cases.

Any solutions? It is really frustrating 😕

Angular CLI team lies. I’m running the latest angular/jest and still seeing this problem. NONE of the above “solutions” work. I’ve tried /* istanbul ignore next */, sourcemaps (both on and off) setting the target to es6, even adding the deprecated “mapcoverage” setting. Nothing works. Problem still exists without so much as a workaround. This is not a “closed” bug.

Before calling a team as liars consider for a moment that you might be missing something or maybe you have encountered an edge case unknown to the community. If you provide a minimum reproducible example (created in stackblitz for instance) it would be more helpful to get your problem sorted out.

Also this issue was closed ages ago - a lot has happend to the CLI since. A regression might have happened in the meantime which, if confirmed, is a reason to reopen it.

@Javin007 bro… come on. These are some of the most capable people working on software today, so the chances that they are lying to cover up a bug that, at its core, leads to an incorrect coverage report number are almost 0.

I’m using the latest CLI and Jest and ignore next works just fine. I would guess there is something else wrong with your setup.

Please consider the tone you take when commenting on projects which are free for you to use. No one owes you a fix, we’re all in this together, and people are doing their best.

Angular CLI team lies. I’m running the latest angular/jest and still seeing this problem. NONE of the above “solutions” work. I’ve tried /* istanbul ignore next */, sourcemaps (both on and off) setting the target to es6, even adding the deprecated “mapcoverage” setting. Nothing works. Problem still exists without so much as a workaround. This is not a “closed” bug.

Is a fix on the way?

There are two related issues both in Istanbul and TypeScript: https://github.com/gotwarlost/istanbul/issues/690 https://github.com/Microsoft/TypeScript/issues/13455

The latest suggestion from both threads is to run tests with coverage targeting ES6 instead of ES5. Unfortunately from what I can tell, the Angular CLI doesn’t use tsconfig.json when running tests, and the suggestions of using --compilerOptions '{\"target\":\"es6\"}' won’t work since Angular CLI doesn’t recognize that.

At the moment, there’s nothing to do, adding /* istanbul ignore next */ comments everywhere around the constructor won’t help. We’re deadlocked while waiting for Angular, Istanbul, or TypeScript to change something.

@filipesilva with version 1.7.4 the problem continues 😦

I’m still experiencing the constructor issue when using Jest with Angular 5.0 and jest-angular-preset. Setting tsconfig.spec.json target to es6 does not seem to have any effect.

@Javin007 could you try with the following:

"jest": "23.6.0",
"jest-preset-angular": "7.0.0-alpha.2",

You will need to change your jest config when you update to the alpha of jest-preset-angular. It looks something like this:

"jest": {
    "preset": "jest-preset-angular",
    "setupFiles": [
      "jest-canvas-mock"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/config/jest/config.ts",
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!@ngrx|@agm)"
    ],
    "transform": {
      "^.+\\.js": "<rootDir>/node_modules/babel-jest",
      "^.+\\.(ts|html)$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "<rootDir>/tsconfig.spec.json",
        "diagnostics": false,
        "stringifyContentPathRegex": "\\.html$",
        "astTransformers": [
          "jest-preset-angular/InlineHtmlStripStylesTransformer.js"
        ]
      },
      "window": true
    },
    "modulePathIgnorePatterns": [
      "<rootDir>/coverage/",
      "<rootDir>/.storybook/",
      "<rootDir>/config/",
      "<rootDir>/dist/",
      "<rootDir>/e2e/",
      "<rootDir>/node_modules/"
    ],
    "collectCoverageFrom": [
      "{apps|libs}/**/src/**/*.ts"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 90,
        "branches": 90,
        "functions": 90,
        "lines": 90
      }
    },
    "testMatch": [
      "**/__tests__/**/*.ts?(x)",
      "**/?(*.)+(spec).ts?(x)"
    ],
    "snapshotSerializers": [
      "jest-preset-angular/AngularSnapshotSerializer.js",
      "jest-preset-angular/HTMLCommentSerializer.js"
    ]
  }

Obviously you’ll need to change everything that’s different, this is just from my project. Upgrading to the alpha version and sticking with Jest 23 for now should fix it.

I have the same issue 😦 … Why is it blocked? Can we expect a fix in the near future?

I’m closing as it seems this is fixed with 1.5.

Is there any other update? Has this been raised with the code coverage tools support? (I’m a bit new to this) I’m getting the issues @davinkevin mentioned, which breaks the only known workaround (other than lowering the branch requirement, which I’m being told is unsavory).

Heya, just wanted to mention that I added the blocked tag because I spent some time trying to fix it and as far as I can tell this is a limitation of the code coverage tools right now. @hotforfeature’s comment (https://github.com/angular/angular-cli/issues/5526#issuecomment-288095948) explains the current situation well, I couldn’t find any further developments.

Using an es6 target is not a real solution per se either, overall the CLI doesn’t really support outputting es2015 (see https://github.com/angular/angular-cli/issues/2907),

Same issues with Angular 5.2.11, Jest 23.1.0 and jest-preset-angular 5.2.2. All the istanbul packages pulled in (inspected via package-lock.json) also appear to be the latest.

        "istanbul-api": "^1.3.1",
        "istanbul-lib-coverage": "^1.2.0",
        "istanbul-lib-instrument": "^1.10.1",
        "istanbul-lib-source-maps": "^1.2.4",

I even tried upgrading to TypeScript 2.9.2 but no luck.

@laxu did you find a solution for that issue with jest? I’m facing the same issue 😦

@filipesilva - I can confirm it fixed the issue with constructors. I assume other similar issues were caused by the same thing.

I updated my test repo to Angular 5 and the coverage report is now correct: https://github.com/rg1220/angular-cli-coverage-issue-5526/tree/feature/update-to-angular-5

Reproduced this issue by simply adding http: HTTP to the constructor of a newly created project created with angular-cli: https://github.com/rg1220/angular-cli-coverage-issue-5526

Same problem here.

Changing target to es6 in the main tsconfig.json doesn’t work either

@Javin007 since even the steps you list above could result in a different version being installed on my machine than yours, could you please put the exact configuration in a StackBlitz so one of us can grab the code and see what’s up? When you say “install jest” there are 1,000 different options, stable vs. alpha version of jest-preset-angular and a bunch of other things that can change, so put your exact configuration in a SB and we can see how you’re getting the issue you’re getting.

Once again, I’m currently, as I type, working on a large project using Angular CLI + Jest + Istanbul and all of my ignore statements work correctly.

indeed, after adding --sourcemaps=false coverage started giving wrong numbers (cli 1.7.4, target es5). When you remove it, coverage is ok.

I resolve the problem by targetting es6 in tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es6",
    "types": ["jasmine", "node"]
  },
  "files": ["test.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
}

Am completely wrong, it seems I had -sm set to false which was completely throwing the coverage off. My bad, Angular 5 FTW!! 💃

Anyone got anything on this issue resolution?

I found an ugly workaround. Set the constructor params to @Inject(TYPE) private variable: any resolves it but then you loose intellisence and type-checking.

I have the same problem as @sandman21dan. Changed target from es5 to es6 in tsconfig.spec.json and constructor branches are still not covered.

Any idea ?

It does indeed seem to be working now. So it would seem it’s the fix is indeed in the Jest alpha. Thanks for your help!

We fixed this by modifying angular.json to add the sourceMap flag:

The flag should be added under the following path: projects.my-app.architect.test.sourceMap

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles.css"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "sourceMap": true // <-- Add this flag!!
          }
        },

We’re also still seeing the same problem, Angular 5.2.6, Jest 22.4.3 and Jest Angular Preset 5.2.2. For whatever reason, it’s not all the time, but there are issues where some of the params in a constructor will be uncovered. It doesn’t seem to make a lot of sense, because it’s not consistent.

I experience this problem with having source maps turned off for testing.

It seems most of the issues are solved nevertheless we are still experiencing same issue like @brunolm mentioned

With the release versions (Angular 5.0.0 and CLI 1.5) all coverage now appears perfect! There was a transient remap problem due to something in RC 8 and/or possibly TS>2.4. Is everyone else’s experience the same?

do note @webcat12345 @brunolm when they add --aot support to ngtest then we’ll be able to target es2015 from the resolved #7610 and it will fix everything for tests.

@webcat12345 well, if you need to see real metrics it might be worth to attempt to do it. Currently there is no other way.

@webcat12345 /* istanbul ignore next */ ignores the line bellow in the coverage. https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md

Following my instructions it will place the ignore statement exactly at a part of the generated code that is not being accessed.

It is a really ugly workaround and might not work in all cases.

@brunolm This workaround works if you don’t use decorator on attribute in your code.

If I remove the @Effect I have 100% coverage… do you have an idea ?