Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

unexpected uncovered branch in jest coverage

I am testing an angular project with jest (using jest-preset-angular).

When collecting coverage, I get an uncovered branch and I don't understand why. I can reproduce the problem with 3 files.

some-dependency.ts

export class SomeDependency {}

some-service.ts

import { Injectable } from '@angular/core';
import { SomeDependency } from './some-dependency';

@Injectable()
export class SomeService {
    constructor(private dependency: SomeDependency) {
        console.log('service created');
    }
}

some-service.spec

import { SomeService } from './some-service';

describe('DerivedClass', () => {
    it('should create', () => {
        expect(new SomeService(null)).toBeTruthy();
    });
});

by running yarn jest --coverage some-service, I get following coverage:

--------------------|----------|----------|----------|----------|-------------------|
File                |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------------|----------|----------|----------|----------|-------------------|
All files           |      100 |       75 |      100 |      100 |                   |
 some-dependency.ts |      100 |      100 |      100 |      100 |                   |
 some-service.ts    |      100 |       75 |      100 |      100 |                 6 |
--------------------|----------|----------|----------|----------|-------------------|

in the HTML report, I get too little information on what is uncovered.

enter image description here

I noticed that removing @Injectable decorator makes the coverage back to 100%

Does someone have an explanation? Is there a way to get my 100% coverage while keeping @Injectable decorator?

Edit: I have added a console.log to prove the constructor is properly invoked. The yellow highlight is given by Istambul report and helps to see the uncovered branch. But there is no branch to me here since there is no condition.

like image 665
Sergio Mazzoleni Avatar asked Aug 15 '19 21:08

Sergio Mazzoleni


People also ask

What are branches in jest coverage?

Branch coverage is a requirement that, for each branch in the program (e.g., if statements, loops), each branch have been executed at least once during testing. (It is sometimes also described as saying that each branch condition must have been true at least once and false at least once during testing.)

What are uncovered lines in jest?

Testing uncovered lines They are marked red, because they are completely untouched by any test. These lines are within an if-statement that is only entered when the passed two values together will be greater than 100.

How does jest determine code coverage?

Jest is collecting coverage only on the function under tests, not from the entire project. This means that despite we are seeing 100% coverage here, potentially we are testing only a fraction of our code. Now Jest is identify correctly what needs to be tested.

What is statement coverage jest?

Statement coverage has each statement in the program been executed. Line coverage has each executable line in the source file been executed. Follow this answer to receive notifications. edited Aug 3 at 6:22. answered Jan 21, 2020 at 18:05.


Video Answer


2 Answers

By comparing with the brand new project created by @markusdresch where coverage is 100% indeed, I finally found that one ts-jest option set in jest.config.js causes side effect on code coverage.

{
    // ...
    globals: {
        'ts-jest': {
            // ...
            isolatedModules: true,
        },
    },
}

isolatedModules set to true causes the uncovered branch described in the original question. By setting it to false or removing it, coverage is back to 100%.

I wish I could use isolatedModules = true and still have a 100% coverage, but I guess this should be a brand new question.

like image 171
Sergio Mazzoleni Avatar answered Oct 19 '22 01:10

Sergio Mazzoleni


I created a brand new Angular app, added jest-preset-angular and the tests you mention, and it's 100% code coverage.

Check out https://github.com/markusdresch/angular-jest-example

---------------------|----------|----------|----------|----------|-------------------|
File                 |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
---------------------|----------|----------|----------|----------|-------------------|
All files            |      100 |      100 |      100 |      100 |                   |
 app                 |      100 |      100 |      100 |      100 |                   |
  app.component.html |      100 |      100 |      100 |      100 |                   |
  app.component.ts   |      100 |      100 |      100 |      100 |                   |
 models              |      100 |      100 |      100 |      100 |                   |
  some-dependency.ts |      100 |      100 |      100 |      100 |                   |
 services            |      100 |      100 |      100 |      100 |                   |
  some.service.ts    |      100 |      100 |      100 |      100 |                   |
---------------------|----------|----------|----------|----------|-------------------|
like image 42
Markus Dresch Avatar answered Oct 19 '22 01:10

Markus Dresch