Need help with code coverage when using Jest to test Angular app

[ahnpnl]

• Issue

I tried to use Jest to test Angular app but the code coverage shows branch not covered for dependency injection in constructor. This issue is fixed if using Karma + Jasmine with Angular CLI. I hope someone can help me to point out what goes wrong, either in ts-jest or Jest

• Expected behavior
  Code coverage should show correctly

• Output from your debug log
  N.A

• Link to a minimal repo that reproduces this issue
  https://github.com/AhnpGit/coverage-issue-jest
  Run yarn coverage and check coverage of app.component.ts. It shows yellow on dependency injection in constructor

cc @kulshekhar

[kulshekhar]

@AhnpGit I'll try to take a look at this after work today

[kulshekhar]

@AhnpGit I tested this and saw the issue you've stated. However, I'm not sure what the cause of this is.

Also, while I use angular and I use ts-jest, I don't use ts-jest with angular so I'm not very familiar with the preset.

As ts-jest doesn't handle coverage at all (it's handled in jest), I'm not sure there's anything that can be done here to fix this.

[ahnpnl]

The preset was created by @thymikee and he refused ts-jest in the precessor. Probably I need to debug jest coverage. Btw, is the runner jest-runner-tsc does the same thing as ts-jest ?

[thymikee]

@AhnpGit can you test this with Jest master? We recently merged this: jestjs/jest#5692

[ahnpnl]

Sure i'll check. I saw that change in master yesterday but I didn't understand quite well what it can help

[thymikee]

Ah, forgot we use TS for JS files too, so that shouldn't change anything.

[ahnpnl]

I suppose I need to debug jest coverage then :)

[ahnpnl]

@kulshekhar I just found out something suspicious about Angular itself. If I write test for a normal ts file, coverage is always correct no matter how many things I define in the constructor of the ts class. However, when adding Angular decorator @component, the coverage immediately goes wrong on the constructor. Do you think this might cause by TypeScript decorator or Angular itself ?

[kulshekhar]

@AhnpGit I'm not 100% certain but there's a chance that Angular's DI is causing this

[ahnpnl]

@kulshekhar you were right. I found out indeed it was caused by Angular DI. DI uses TypeScript feature emitDecoratorMetadata. This option will let TypeScript compiler generates .js file which has something like
__metadata("design:paramtypes", [TestService_1.TestService]) (TestService is my DI service).

I haven't tried to create a decorator with reflect meta yet to test but I think it will have the same issue.

I still don't know what should be the proper fix, but I guess something for Jest I assume. @thymikee do you think so ?

[kulshekhar]

@AhnpGit can you check whether v22.4.4 fixes this for you?

[ahnpnl]

@kulshekhar it seems to not working for me

[GeeWee]

Have you also set the ignore decorator flags? You can view them either in the readme or the changed files inside PR #488

[ahnpnl]

Yes I tried, but none of them works for decorators which are created by Angular.

[huafu]

@ahnpnl lemme know if 23.10 doesn't fix this ;-)

[danil-z]

I'm experiencing the same issue

[danil-z]

[email protected]
ts-jest "23.10.0-beta.6",

[huafu]

@danil-z 23.10.3 is out, use it instead it should fix your issue

[blackholegalaxy]

Still experiencing the same with ts-jest 23.10.3 and jest 23.6.0. Cleared the cache before running the tests.

[huafu]

@blackholegalaxy please provide a minimal repo to reproduce and, since this issue is old and not opened by you, explain the exact problem which you personally have in this repo ;-)

[akaNightmare]

@huafu

package.json

"jest": {
        "moduleFileExtensions": [
            "js",
            "json",
            "ts"
        ],
        "testEnvironment": "node",
        "setupTestFrameworkScriptFile": "<rootDir>/__tests__/setup.js",
        "testMatch": [
            "**/__tests__/**/*(spec|test).ts",
            "**/?(*.)+(spec|test).ts"
        ],
        "transform": {
            "^.+\\.tsx?": "ts-jest"
        },
        "preset": "ts-jest/presets/js-with-ts",
        "testEnvironmentOptions": {},
        "collectCoverage": true,
        "collectCoverageFrom": [
            "app/services/**/*.ts"
        ],
        "testPathIgnorePatterns": [
            "/node_modules/",
            "dist/"
        ],
        "coverageDirectory": "<rootDir>/__tests__/__coverage__",
        "moduleNameMapper": {
            "^@middlewares(.*)$": "<rootDir>/app/middlewares$1",
            "^@enums(.*)$": "<rootDir>/app/enums$1",
            "^@services(.*)$": "<rootDir>/app/services$1",
            "^@common(.*)$": "<rootDir>/app/common$1",
            "^@root(.*)$": "<rootDir>/app$1",
            "^@package$": "<rootDir>/package.json"
        },
        "globals": {
            "ts-jest": {
                "tsConfig": "./__tests__/tsconfig.test.json"
            }
        }
    }

test.tsconfig.json

"inlineSourceMap": true,
"lib": [
            "es2017"
        ],
        "target": "es2017",

libs/packages

"jest": "^23.6.0",
"ts-jest": "^23.10.4",
"typescript": "3.1.2"

[danil-z]

problem remains, can be reproduced on any sample project with angular
Any example from angular site, just inject router to component and make trivial test

[danil-z]

here is repo to reproduce

https://github.com/danil-z/covjest